使用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

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

再见