App下載

在html中怎么壓縮圖片和制作卡片?canvas標(biāo)簽相關(guān)案例分享!

猿友 2021-07-26 10:21:26 瀏覽數(shù) (2768)
反饋

在我們?nèi)粘5纳罹W(wǎng)上購物中會(huì)看到很多活動(dòng)頁面里面擁有很多精美的圖片,那么今天我們就來說說有關(guān)于:“在html中怎么壓縮圖片和制作卡片?canvas標(biāo)簽相關(guān)案例分享! ”這個(gè)問題的相關(guān)內(nèi)容,下面是小編收集整理的相關(guān)內(nèi)容,希望對大家的學(xué)習(xí)有所幫助!

使用canvas壓縮圖片

在 html 中使用寫入?input?標(biāo)簽,?type?為?file?時(shí)候,可以調(diào)出手機(jī)的相冊可供選擇照片,也可以支持?jǐn)z像頭進(jìn)行拍照功能。在這個(gè)場景下,就可能出現(xiàn)圖片的體積會(huì)更大,可能會(huì)超出后端所支持的最大范圍,從而導(dǎo)致上傳失敗。

<input id="file" type="file">

1.首先要先獲取到圖片文件

var eleFile = document.querySelector('#file');
  var reader = new FileReader()
  eleFile.addEventListener('change', function (event) {
    file = event.target.files[0];
    console.log(file)
    // 選擇的文件是圖片
    if (file.type.indexOf("image") == 0) {
      reader.readAsDataURL(file);    
    }
  });

2.這個(gè)時(shí)候就取到了圖片文件,就不得不了解一下js中FileReader對象的使用了

?FileReader?對象允許 Web 應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件(或原始數(shù)據(jù)緩沖區(qū))的內(nèi)容

方法:

方法名 參數(shù) 描述
abort none 中斷讀取
readAsBinaryString file 二進(jìn)制碼
readAsDataURL file 將文件讀取為 DataURL
readAsText file, [encoding] 將文件讀取為文本
  • readAsText:該方法有兩個(gè)參數(shù),其中第二個(gè)參數(shù)是文本的編碼方式,默認(rèn)值為 UTF-8。這個(gè)方法非常容易理解,將文件以文本方式讀取,讀取的結(jié)果即是這個(gè)文本文件中的內(nèi)容。
  • readAsBinaryString:該方法將文件讀取為二進(jìn)制字符串,通常我們將它傳送到后端,后端可以通過這段字符串存儲(chǔ)文件。
  • readAsDataURL:這是例子程序中用到的方法,該方法將文件讀取為一段以 data: 開頭的字符串,這段字符串的實(shí)質(zhì)就是 Data URL,Data URL是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件。(其中base64的方式就是由此來獲得的。。)

FileReader處理事件簡介

事件 描述
onabort 中斷時(shí)觸發(fā)
onerror onabort
onload 文件讀取成功完成時(shí)觸發(fā)
onloadend 讀取完成觸發(fā),無論成功或失敗
onloadstart 讀取開始時(shí)觸發(fā)
onprogress 讀取中

繼續(xù)上面的操作,在拿到圖片之后,需要將文件進(jìn)行處理轉(zhuǎn)化,此時(shí)

var reader = new FileReader(); 
//將文件以Data URL形式讀入頁面 
  reader.readAsDataURL(file); 
  reader.onload=function(e) { 
    console.log(reader)
  } 

現(xiàn)在取到了圖片也進(jìn)行了轉(zhuǎn)化,現(xiàn)在可以進(jìn)行壓縮了。

var eleFile = document.querySelector('#file');
  var reader = new FileReader()
  eleFile.addEventListener('change', function (event) {
    file = event.target.files[0];
    // console.log(file)
    // 選擇的文件是圖片
    if (file.type.indexOf("image") == 0) {
      var reader = new FileReader(); 
      //將文件以Data URL形式讀入頁面 
        reader.readAsDataURL(file); 
        reader.onload=function(e) { 
          // console.log(this.result)
          var pre=document.getElementById("pre"); 
          pre.setAttribute("src", this.result)
          canvasDataURL(this.result, 100, 0.5)
        }     
    }
  })
  /* [canvasDataURL    通過canvas進(jìn)行壓縮]
   * @params path  圖片的base64的格式
   * @params targetWidth  壓縮后圖片的寬度  
   * @params quality 圖片質(zhì)量  quality值越小,所繪制出的圖像越模糊
   */
  function canvasDataURL(path, targetWidth, quality) {
    var img = new Image();
    img.src = path
    img.onload = function () {
        // var that = this
        // console.log(that)
        // 默認(rèn)按比例壓縮
        var w = this.width
        var h = this.height
        scale = w / h;
        w = targetWidth
        h = targetWidth / scale
        var quality = quality;  // 默認(rèn)圖片質(zhì)量為0.7
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 創(chuàng)建屬性節(jié)點(diǎn)
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(this, 0, 0, w, h);
        // quality值越小,所繪制出的圖像越模糊
        var base64 = canvas.toDataURL('image/jpeg', quality);
        var result=document.getElementById("result"); 
        result.setAttribute("src", base64)
    }
  }

很簡單,這樣就可以得到壓縮后的圖片了,從以上的代碼可得知,原理在于canvas 中的 toDataURL 方法可指定圖片壓縮后的格式及壓縮質(zhì)量,把 canvas 信息壓縮并轉(zhuǎn)為 base64 編碼來實(shí)現(xiàn)壓縮。

使用canvas制作卡片

場景:把剛剛壓縮之后的圖片與另一張圖片相結(jié)合,可長按進(jìn)行保存。

function drawCanvas (target) {
    var canvas = document.querySelector('#myCanvas')
    var ctx = canvas.getContext('2d')
    // 是設(shè)備上物理像素和設(shè)備獨(dú)立像素(device-independent pixels (dips))的比例
    var dp = window.devicePixelRatio || 1
    var backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1
    var ratio = this.dp / this.backingStoreRatio
    var oldWidth = canvas.width
    var oldHeight = canvas.height
    canvas.width = oldWidth * ratio
    canvas.height = oldHeight * ratio
    canvas.style.width = oldWidth + 'px'
    canvas.style.height = oldHeight + 'px'
    ctx.scale(ratio, ratio)
    var headerImg = new Image()
    var bgImg = new Image()
    headerImg.src = target
    bgImg.src = '../bg.png'
    headerImg.onload = (e) => {
      // 圖片的寬高比
      var rate = headerImg.width / headerImg.height
      console.log(rate)
      bgImg.onload = (e) => {
        ctx.drawImage(headerImg, 10, 30, 50, (50 / rate))
        // 背景圖片
        ctx.drawImage(bgImg, 0, 0, 150, 150)
        ctx.fillText('厲害啊', 80, 70)
        var resultImg = new Image()
        resultImg.src = canvas.toDataURL('image/png', 1)
        resultImg.style.width = '100%'
        var cardImg=document.getElementById("cardImg"); 
        cardImg.setAttribute("src", resultImg.src)
      }
    }

取到剛剛得到的圖片,在圖像裝載完畢時(shí)后將其畫到畫布上,也可以配上文字等等,最后也是把canvas的信息轉(zhuǎn)為base64編碼來進(jìn)行實(shí)現(xiàn) ??梢酝ㄟ^代碼來進(jìn)行實(shí)例的實(shí)踐

以上就是有關(guān)于這個(gè):“在html中怎么壓縮圖片和制作卡片?canvas標(biāo)簽相關(guān)案例分享! ”這個(gè)問題的相關(guān)內(nèi)容,更多有關(guān)于html這方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。希望小編分享的內(nèi)容對你有所幫助。 


0 人點(diǎn)贊