canvas怎么压缩图片(使用canvas压缩图片大小的方法示例)
类别:Web前端 浏览量:2616
时间:2021-10-01 01:56:06 canvas怎么压缩图片
使用canvas压缩图片大小的方法示例问题来源
这个问题,源于上传图片文件的时候,后台限制了2MB的大小,but在调起相机拍照的时候分分钟超过了2MB,为了不影响用户体验和功能需求,需要前端对大小进行压缩,然后传到后台。
思路分析
找了很多资料,发现只有canvas可以对图片进行压缩处理。
原理大概就是: 1、先将图片的file文件转成baseURL 2、创建一个image标签去接收文件获取图片的宽高和比例。 3、创建canvas画布设置画布的大小。 4、将图片绘制到canvas上面。 5、对canvas进行压缩处理,获得新的baseURL 6、将baseURL转化回文件。
前提的函数
将file文件转化为base64
/** * @param {二进制文件流} file * @param {回调函数,返回base64} fn */ function changeFileToBaseURL(file,fn){ // 创建读取文件对象 var fileReader = new FileReader(); //如果file没定义返回null if(file == undefined) return fn(null); // 读取file文件,得到的结果为base64位 fileReader.readAsDataURL(file); fileReader.onload = function(){ // 把读取到的base64 var imgBase64Data = this.result; fn(imgBase64Data); } }
将base64转化为文件流
/** * 将base64转换为文件 * @param {baseURL} dataurl * @param {文件名称} filename * @return {文件二进制流} */ function dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, {type:mime}); }
压缩方法
/** * canvas压缩图片 * @param {参数obj} param * @param {文件二进制流} param.file 必传 * @param {目标压缩大小} param.targetSize 不传初始赋值-1 * @param {输出图片宽度} param.width 不传初始赋值-1,等比缩放不用传高度 * @param {输出图片名称} param.fileName 不传初始赋值image * @param {压缩图片程度} param.quality 不传初始赋值0.92。值范围0~1 * @param {回调函数} param.succ 必传 */ function pressImg(param){ //如果没有回调函数就不执行 if(param && param.succ){ //如果file没定义返回null if(param.file == undefined) return param.succ(null); //给参数附初始值 param.targetSize = param.hasOwnProperty("targetSize") ? param.targetSize : -1; param.width = param.hasOwnProperty("width") ? param.width : -1; param.fileName = param.hasOwnProperty("fileName") ? param.fileName: "image"; param.quality = param.hasOwnProperty("quality") ? param.quality : 0.92; var _this = this; // 得到文件类型 var fileType = param.file.type; // console.log(fileType) //image.jpg" alt="canvas怎么压缩图片(使用canvas压缩图片大小的方法示例)" border="0" />
方法使用
文件的size是按照字节,所以我们需要把要求的大小转化成字节。 1字节就是1byte就是1B,1KB = 1024B,1MB = 1024 * 1024B
<input type="file" id="fileImg" class="fileImg"/>
// 图片文件上传获取url $("#fileImg").on('change',function(){ pressImg({ file:this.files[0], targetSize:2 * 1024 * 1024, quality:0.5, width:600, succ:function(resultFile){ //如果不是null就是压缩成功 if(resultFile){ //TODO } } }) });
问题总结
图片压缩程度
图片的压缩程度不太好确定,所以可以进行多次尝试,根据需求方的要求进行调整。 改变目标图片的大小和清晰度都可以改变图片的压缩程度。
本来想做一个压缩图片的递归,直到图片大小符合期望
后来发现
- 如果目标大小比较小,图片如何进行压缩都不能满足条件的时候,会造成循环无法跳出,浪费资源。
- 如果图片进行几次压缩之后,文件大小不会改变了,有的时候还会增加,奇奇怪怪。 所以就放弃了递归。
ios拍摄方向问题
因为ios调起系统相机拍照是逆时针旋转了90度。 而在我压缩图片之后传到后台,发现图片的exif信息的拍摄方向丢失,导致ios上传的图片都是逆时针旋转了90度。这个问题安卓不曾发现。
目前有些怀疑,是base64转化成file文件的时候,丢失的。 之后验证后会在这里进行补充说明。
@version1.0——2019-8-2——创建《使用canvas压缩图片大小》
©burning_韵七七
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- canvas画法教学(手把手教你实现一个canvas智绘画板的方法)
- 优秀的canvas背景特效网站(基于canvas实现超炫酷的流水灯效果)
- canvas图片填充位置(手摸手教你用canvas实现给图片添加平铺水印的实现)
- html5的canvas图形绘制技术(详解HTML5 Canvas标签及基本使用)
- html判断canvas已经绘制过了(html2canvas截图空白问题的解决)
- canvas心形水波(Canvas波浪花环的示例代码)
- canvas实现字体粒子爆炸特效(javascript canvas实现雨滴效果)
- 微信小程序canvas 动画(微信小程序使用canvas绘制钟表)
- html5中canvas标签(html5 canvas绘制网络字体的常用方法)
- html5canvas怎么改扇形起始角(HTML5 Canvas实现放大镜效果示例)
- 用html5的canvas绘制剪裁图像(Html5 canvas画图白板踩坑)
- canvas设置点击(Canvas高级路径操作之拖拽对象的实现)
- 使用canvas的好坏(关于canvas绘制模糊问题的解决方法)
- 使用canvas画个正方形(canvas小画板之平滑曲线的实现)
- canvas图片裁剪插件(浅析图片上传及canvas压缩的流程)
- html5 canvas touch(html5 canvas手势解锁源码分享)
- Beyond 版本《无人深空》主线任务攻略 阿特拉斯之道(版本无人深空主线任务攻略)
- 全球科技界最有钱大佬TOP 15 你知道几位(全球科技界最有钱大佬TOP)
- 2主力后腰缺阵 泰山队奇兵有望获重用,赛季0出场,迎来中超首秀(泰山队奇兵有望获重用)
- 三分71 生死战爆发 篮网旧将丁威迪今天成奇兵,助队赢球(三分71生死战爆发)
- 《红 雄安》系列广播剧第一集 水上奇兵雁翎队(雄安系列广播剧第一集)
- 小说 小伙穿越成刘备,用现代知识指挥作战,众谋士都看呆了(小伙穿越成刘备)
热门推荐
- sql server没有服务器怎么办(SQL Server 2012安装后服务器名称找不到的解决办法)
- html5怎么修改背景颜色(HTML5 body设置全屏背景图片的示例代码)
- python写的工具(python调用虹软2.0第三版的具体使用)
- 前端ui 滑动条(AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码)
- dede源码如何新增页面(dedecms 在内容模板里调用栏目内容即{dede:field.content/})
- 云服务器和物理服务器哪个可靠(云服务器与香港服务器有什么区别?)
- 阿里云mysql如何接入(阿里云服务器安装Mysql数据库的详细教程)
- idea的mysql如何连接(在IntelliJ IDEA中使用Java连接MySQL数据库的方法详解)
- ExtJs中怎么上传文件
- mysql 分组自定义排序(正排倒排,并不是 MySQL 的排序的全部!)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9