如今手机像素越来越高，造成拍出来的照片越来越大，随便拍一张就好几兆，于是乎就有了一种需求就是压缩图片，在之前压缩图片的功能是在后台操作的，之后前端亦可以进行图片的压缩功能。
前端进行图片压缩的原理很简单，就是利用canvas来进行压缩，js将file框内的图片文件读取之后，按照比例绘制到canvas上，然后将canvas保存成图片即可实现了压缩功能。
代码语言：javascript复制function resizeMe(img, max_width, max_height) {
var canvas = document.createElement('canvas');
var width = img.width;
var height = img.height;
// 在这里图片是等比例缩放的，调用方法时填入图片允许的最大宽度或者是最大的高度
//如果最大宽度为0 则按照最大高度固定，宽度自适应的方式来实现
//如果是最大高度为0，则按照最大的宽度来实现
if(max_width==0){
if (height > max_height) {
width = Math.round(width *= max_height / height);
height = max_height;
}
}
if(max_height==0){
if (width > max_width) {
height = Math.round(height *= max_width / width);
width = max_width;
}
}
canvas.width =width;
canvas.height = height;
var ctx = canvas.getContext("2d");
canvas.width =width;
canvas.height = height;
ctx.drawImage(img,0,0, width, height);
return canvas.toDataURL("image/jpeg", 0.7);//这里的0.7值的是图片的质量
}当file框改变后读取文件
代码语言：javascript复制var selectFileImage = (el)=>{
var reader = new FileReader();
reader.readAsArrayBuffer(el.files[0]);
var file = el.files[0]
reader.onload = (ev) => {
var blob = new Blob([ev.target['result']]);
window['URL'] = window['URL'] || window['webkitURL'];
var blobURL = window['URL'].createObjectURL(blob);
var image = new Image();
image.src = blobURL;
image.onload = (e) => {
var thumb = resizeMe(image, 200, 0,myorientation);//获得的路径是将图片转换成了base64
$("#myImage").attr("src",thumb);
}
}至此，图片的压缩功能已经完全实现了
