Js利用Canvas实现图片压缩功能
最近做的APP项目涉及到手机拍照上传图片，因为手机拍照的图片通常都比较大，所以上传的时候就会很慢。为此，需要对图片进行压缩处理来优化上传功能。以下是具体实现：
/*
*图片压缩
*img原始图片
*width压缩后的宽度
*height压缩后的高度
*ratio压缩比率
*/
functioncompress(img,width,height,ratio){
varcanvas,ctx,img64;
canvas=document.createElement('canvas');
canvas.width=width;
canvas.height=height;
ctx=canvas.getContext("2d");
ctx.drawImage(img,0,0,width,height);
img64=canvas.toDataURL("image/jpeg",ratio);
returnimg64;
}
上面是一个图片压缩函数，返回base64格式的图片数据。其中压缩比率取值（0-1之间）越大图片质量越高。建议不要将图片转为png格式，因为转为png格式，图片的base64比转为jpeg的要长不少。下面是实际调用：
varimage=newImage();
image.src="/img/test.jpg";
image.onload=function(){
varimg64=compress(image,500,400,0.7);
document.getElementById("test").src=img64;
}
注意：压缩方法的调用以及图片src赋值必须放在图片的onload方法里面。因为只有等图片加载完成后才能进行压缩处理，从而转换为base64进行赋值。如果放在onload方法外面，则可能压缩代码无效，或者会生成一张纯黑色的图片。
以上这篇Js利用Canvas实现图片压缩功能就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。