使用canvas怎么对图片进行压缩

2023-06-09 12:06:23 695人浏览薄情痞子

摘要

本篇文章为大家展示了使用canvas怎么对图片进行压缩，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。前提的函数将file文件转化为base64function changeFileToBa

本篇文章为大家展示了使用canvas怎么对图片进行压缩，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

前提的函数

将file文件转化为base64

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转化为文件流

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}); }

压缩方法

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        }     }  })});

问题总结

图片压缩程度

图片的压缩程度不太好确定，所以可以进行多次尝试，根据需求方的要求进行调整。改变目标图片的大小和清晰度都可以改变图片的压缩程度。

本来想做一个压缩图片的递归，直到图片大小符合期望

后来发现