博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用canvas实现图片压缩
阅读量:6988 次
发布时间:2019-06-27

本文共 1280 字,大约阅读时间需要 4 分钟。

那,首先通过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

*・゜゚・*:.。..。.:*・'(*゚▽゚*)'・*:.。. .。.:*・゜゚・*

再见

转载地址:http://xczvl.baihongyu.com/

你可能感兴趣的文章
cocos creator protobuf实践
查看>>
pgpool 后台运行方法
查看>>
精品素材:推荐15套非常漂亮的 iOS 图标素材
查看>>
使用HttpSessionListener接口监听Session的创建和失效
查看>>
android 国际化
查看>>
10000单词积累,从今天开始(待续)。。。
查看>>
转Spring+Hibernate+EHcache配置(三)
查看>>
眼动研究
查看>>
IOS-工程师Mac上的必备软件
查看>>
socket.io不为人知的功能
查看>>
一个网站故障排查的、代码更新的简便脚本
查看>>
GNU make manual 翻译( 一百四十二)
查看>>
Excel里的多列求和(相邻或相隔皆适用)
查看>>
使用现有ECC数据库进行安装或者恢复系统
查看>>
发布我的高性能纯C#图像处理基本类,顺便也挑战一下极限。:)
查看>>
在Ubuntu上单机安装Hadoop
查看>>
安装SharePoint2010出现“Could not find stored procedure ‘sp_dboption’.”的解决方法
查看>>
存储过程中执行动态Sql语句
查看>>
SQL Server里简单参数化的痛苦
查看>>
最好用的图表工具 -- ECharts
查看>>