使用canvas压缩图片大小

【目录】

• 问题来源
• 思路分析
• 前提的函数
  • 将file文件转化为base64
  • 将base64转化为文件流
• 压缩方法
• 方法使用
• 问题总结
  • 图片压缩程度
  • 原本想作一个压缩图片的递归，直到图片大小符合指望
  • ios拍摄方向问题

问题来源

这个问题，源于上传图片文件的时候，后台限制了2MB的大小，but在调起相机拍照的时候分分钟超过了2MB,为了避免影响用户体验和功能需求，须要前端对大小进行压缩，而后传到后台。

思路分析

找了不少资料，发现只有canvas能够对图片进行压缩处理。

原理大概就是： 一、先将图片的file文件转成baseURL 二、建立一个image标签去接收文件获取图片的宽高和比例。 三、建立canvas画布设置画布的大小。 四、将图片绘制到canvas上面。 五、对canvas进行压缩处理，得到新的baseURL 六、将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度。这个问题安卓未曾发现。

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

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

©burning_韵七七