运用canvas完成图片紧缩

2024年5月25日 211次阅读 来源: Haowen

那，起首经由过程URL.createObjectURL(file)从file对象直接取得了图片的地点

前面就不细致说了，最先紧缩咯 ( ´ ▽ ` )ﾉ

噢，有个注重点:

每次挪用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
  }
},

这里说说

canvas.toDataURL(type, encoderOptions)
HTMLCanvasElement.toDataURL() 要领接收两个参数，type和encoderOptions

type是可选的，图片格式，默许是 image/png，encoderOptions示意图片质量， 在type为image/jpeg 或 image/webp时能够从 0 到 1 的区间内挑选图片的质量。假如超越取值局限，将会运用默许值 0.92。其他参数会被疏忽。

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

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

再会

    原文作者：Haowen
    原文地址: https://segmentfault.com/a/1190000009308553
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞