使用canvas实现图片压缩

原文链接 https://segmentfault.com/a/1190000009308553

那,首先通过URL.createObjectURL(file)从file对象直接取得了图片的地址

前面就不详细说了,开始压缩咯 ( ´ ▽ ` )ノ

噢,有个注意点:

每次调用createObjectURL的时候,一个新的URL对象就被创建了,即使是同一个file对象,也会创建一个新对URL对象,所以,为了最佳性能和内存使用,当不再需要这个对象的时候要URL.revokeObjectURL()释放它。

开始压缩

创建一个compressImage函数,将之图片的地址url作参数传入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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()方法接受两个参数,typeencoderOptions

type是可选的,图片格式,默认是 image/pngencoderOptions表示图片质量, 在typeimage/jpegimage/webp时可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略。

toDataURL()返回的是base64字符串,如果要转成2进制

1
2
3
4
5
6
7
8
9
10
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

・゜゚・:.。..。.:・’(゚▽゚)’・:.。. .。.:・゜゚・

再见
5月5日发布