使用canvas實現圖片壓縮

時間 2019-11-08

標籤使用 canvas 實現圖片壓縮简体版

原文原文鏈接

那，首先經過URL.createObjectURL(file)從file對象直接取得了圖片的地址web

前面就不詳細說了，開始壓縮咯 ( ´ ▽ ` )ﾉcanvas

噢，有個注意點:iphone

每次調用createObjectURL的時候，一個新的URL對象就被建立了，即便是同一個file對象，也會建立一個新對URL對象，因此，爲了最佳性能和內存使用，當再也不須要這個對象的時候要URL.revokeObjectURL()釋放它。函數

開始壓縮性能

建立一個compressImage函數，將之圖片的地址url做參數傳入：測試

compressImage (url) {
  let cvs = document.createElement('canvas')
  let ctx = cvs.getContext('2d')
  let img = new window.Image()
  img.src = url
  img.onload = () => {
    cvs.width = img.width
    cvs.height = img.height
    setTimeout(() => {
      ctx.drawImage(img, 0, 0, cvs.width, cvs.height)
      this.newImageData = cvs.toDataURL('image/jpeg', 0.1)
    }, 0)
    this.showPreviewer = true
  }
},

這裏說說this

canvas.toDataURL(type, encoderOptions)
HTMLCanvasElement.toDataURL() 方法接受兩個參數，type和encoderOptionsurl

type是可選的，圖片格式，默認是 image/png，encoderOptions表示圖片質量，在type爲image/jpeg 或 image/webp時能夠從 0 到 1 的區間內選擇圖片的質量。若是超出取值範圍，將會使用默認值 0.92。其餘參數會被忽略。code

toDataURL()返回的是base64字符串，若是要轉成2進制對象

convertToBinary (dataURI) {
  let byteString = window.atob(dataURI.split(',')[1])
  let ab = new ArrayBuffer(byteString.length)
  let ia = new Uint8Array(ab)
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i)
  }
  let bb = new window.Blob([ ab ])
  return bb
}

測試結果：由iphone6所拍攝的圖片上傳，由平均1.9M左右壓縮至170k

*･゜ﾟ･*:.｡..｡.:*･'(*ﾟ▽ﾟ*)'･*:.｡. .｡.:*･゜ﾟ･*

再見