使用canvas压缩图片大小的方法示例


Posted in HTML / CSS onAugust 02, 2019

问题来源

这个问题,源于上传图片文件的时候,后台限制了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/jpeg
     if(fileType.indexOf("image") == -1){
       console.log('请选择图片文件^_^');
       return param.succ(null);
     }
     //如果当前size比目标size小,直接输出
     var size = param.file.size;
     if(param.targetSize > size){
       return param.succ(param.file);
     }
     // 读取file文件,得到的结果为base64位
     changeFileToBaseURL(param.file,function(base64){
       if(base64){
         var image = new Image();
         image.src = base64;
         image.onload = function(){
           // 获得长宽比例
           var scale = this.width / this.height;
           // console.log(scale);
           //创建一个canvas
           var canvas = document.createElement('canvas');
           //获取上下文
           var context = canvas.getContext('2d');
           //获取压缩后的图片宽度,如果width为-1,默认原图宽度
           canvas.width = param.width == -1 ? this.width : param.width;
           //获取压缩后的图片高度,如果width为-1,默认原图高度
           canvas.height = param.width == -1 ? this.height : parseInt(param.width / scale);
           //把图片绘制到canvas上面
           context.drawImage(image, 0, 0, canvas.width, canvas.height);
           //压缩图片,获取到新的base64Url
           var newImageData = canvas.toDataURL(fileType,param.quality);
           //将base64转化成文件流
           var resultFile = dataURLtoFile(newImageData,param.fileName);
           //判断如果targetSize有限制且压缩后的图片大小比目标大小大,就弹出错误
           if(param.targetSize != -1 && param.targetSize < resultFile.size){
             console.log("图片上传尺寸太大,请重新上传^_^");
             param.succ(null);
           }else{
             //返回文件流
             param.succ(resultFile);
           }
         }
       }
     });
   }
 }

方法使用

文件的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度。这个问题安卓不曾发现。

使用canvas压缩图片大小的方法示例

目前有些怀疑,是base64转化成file文件的时候,丢失的。 之后验证后会在这里进行补充说明。

@version1.0——2019-8-2——创建《使用canvas压缩图片大小》

©burning_韵七七

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
详解CSS3开启硬件加速的使用和坑
Aug 21 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
html5录音功能实战示例
Mar 25 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 #HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 #HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 #HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 #HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 #HTML / CSS
Canvas图片分割效果的实现
Jul 29 #HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 #HTML / CSS
You might like
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
PHP抓取及分析网页的方法详解
2016/04/26 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
js瀑布流布局的实现
2020/06/28 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
在Python中调用ggplot的三种方法
2015/04/08 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
python实现文件的备份流程详解
2019/06/18 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
Python join()函数原理及使用方法
2020/11/14 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
全球在线商店:BerryLook
2019/04/14 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
异步传递消息系统的作用
2016/05/01 面试题
大学生就业意向书
2015/05/11 职场文书
《所见》教学反思
2016/02/23 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL