canvas壓縮圖片以及卡片製做

在作一些活動頁的時候，常常會有一些須要上傳圖片的需求，而且還須要將圖片以及生成的文字以及貼圖生成一張卡能夠供用戶能夠長按保存。這個需求以前完成過一次，最近又趕上了，使用的都是canvas來實現的。乾脆整理出一篇博客出來。若是有更好的實現方法，歡迎提出一塊兒探討。

---

使用canvas壓縮圖片

在html中使用寫入input標籤，type爲file時候，能夠調出手機的相冊可供選擇照片，也能夠支持攝像頭進行拍照功能。在這個場景下，就可能出現圖片的體積會更大，可能會超出後端所支持的最大範圍，從而致使上傳失敗。

<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.這個時候就取到了圖片文件，就不得不瞭解一下js中FileReader對象的使用了

FileReader對象容許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩衝區）的內容

方法：

方法名	參數	描述
abort	none	中斷讀取
readAsBinaryString	file	二進制碼
readAsDataURL	file	將文件讀取爲 DataURL
readAsText	file, [encoding]	將文件讀取爲文本

• readAsText：該方法有兩個參數，其中第二個參數是文本的編碼方式，默認值爲 UTF-8。這個方法很是容易理解，將文件以文本方式讀取，讀取的結果便是這個文本文件中的內容。
• readAsBinaryString：該方法將文件讀取爲二進制字符串，一般咱們將它傳送到後端，後端能夠經過這段字符串存儲文件。
• readAsDataURL：這是例子程序中用到的方法，該方法將文件讀取爲一段以 data: 開頭的字符串，這段字符串的實質就是 Data URL，Data URL是一種將小文件直接嵌入文檔的方案。這裏的小文件一般是指圖像與 html 等格式的文件。（其中base64的方式就是由此來得到的。。）

FileReader處理事件簡介

事件	描述
onabort	中斷時觸發
onerror	onabort
onload	文件讀取成功完成時觸發
onloadend	讀取完成觸發，不管成功或失敗
onloadstart	讀取開始時觸發
onprogress	讀取中

繼續上面的操做，在拿到圖片以後，須要將文件進行處理轉化，此時

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

如今取到了圖片也進行了轉化，如今能夠進行壓縮了。

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進行壓縮] * @params path 圖片的base64的格式 * @params targetWidth 壓縮後圖片的寬度 * @params quality 圖片質量 quality值越小，所繪製出的圖像越模糊 */
  function canvasDataURL(path, targetWidth, quality) {
    var img = new Image();
    img.src = path
    img.onload = function () {
        // var that = this
        // console.log(that)
        // 默認按比例壓縮
        var w = this.width
        var h = this.height
        scale = w / h;
        w = targetWidth
        h = targetWidth / scale
        var quality = quality;  // 默認圖片質量爲0.7
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 建立屬性節點
        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方法可指定圖片壓縮後的格式及壓縮質量，把canvas信息壓縮並轉爲base64編碼來實現壓縮。

使用canvas製做卡片

場景：把剛剛壓縮以後的圖片與另外一張圖片相結合，可長按進行保存。

function drawCanvas (target) {
    var canvas = document.querySelector('#myCanvas')
    var ctx = canvas.getContext('2d')
    // 是設備上物理像素和設備獨立像素(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)
      }
    }
複製代碼

取到剛剛獲得的圖片，在圖像裝載完畢時後將其畫到畫布上，也能夠配上文字等等，最後也是把canvas的信息轉爲base64編碼來進行實現 。能夠經過代碼來進行實例的實踐