使用canvas实现图片压缩
来源:互联网 发布:达内java速成班 编辑:程序博客网 时间:2024/05/21 18:37
那,首先通过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
原文地址:https://segmentfault.com/a/1190000009308553
- 使用canvas实现图片压缩
- 使用canvas实现图片压缩
- 使用canvas实现图片压缩上传
- canvas实现图片压缩
- 使用canvas压缩图片
- Javascript 使用canvas压缩图片
- 使用Canvas来压缩图片
- HTML5 Canvas 实现本地压缩图片
- HTML5 Canvas 实现本地压缩图片
- html5+canvas实现图片的压缩上传
- H5 canvas实现客户端压缩图片上传
- canvas实现图片压缩及复制
- 利用canvas实现前端压缩图片
- 【图片压缩】使用canvas,html5进行图片压缩
- html canvas压缩图片
- canvas压缩图片
- canvas图片体积压缩
- html5 canvas 图片压缩
- JAVA的数组
- zabbix 从部署到快速上手
- Python3.6爬虫练习之爬取全国大学省份数据
- Qt状态机场景模拟-续
- HTML 依赖注入 内置服务
- 使用canvas实现图片压缩
- js+jQuery+ajax,处理数据和功能的实现
- [基环外向树+树形DP]BZOJ 1040—— [ZJOI2008]骑士
- 自增运算符重载
- java中如何 把http变为https:
- MATLAB 2016a安装
- MVP+RecyclerView
- 51Nod 1433 0和5 倍数
- Matlab上使用LIBSVM 3.22