问题来源
这个问题，源于上传图片文件的时候，后台限制了2MB的大小，but在调起相机拍照的时候分分钟超过了2MB,为了不影响用户体验和功能需求，需要前端对大小进行压缩，然后传到后台。
思路分析
找了很多资料，发现只有canvas可以对图片进行压缩处理。
原理大概就是： 1、先将图片的file文件转成baseURL 2、创建一个image标签去接收文件获取图片的宽高和比例。 3、创建canvas画布设置画布的大小。 4、将图片绘制到canvas上面。 5、对canvas进行压缩处理，获得新的baseURL 6、将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;
