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

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

问题总结

 图片压缩程度

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

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

后来发现

如果目标大小比较小，图片如何进行压缩都不能满足条件的时候，会造成循环无法跳出，浪费资源。