通过降低图片的质量（或尺寸）压缩图片大小

生产上图片太大除了用户体验不好，上传等待时间过长，还可能会引发用户缓存丢失，导致必要参数缺失请求失败，或者超时引起的请求失败，查找资料，原理是经过一系列的转化过程file文件=》base64=》cavas=》blob=》file文件，关键在canvas生成时质量降低，也可以根据需求把canvas的尺寸也缩小，我的话是直接不改变图片的尺寸。还有一个关键点是，需要异步拿到压缩侯到文件，否则拿到是处理前到文件。代码如下

function compressImg(file) {
    var deferred = $.Deferred();
    var fileObj = file;
    if(file.size > 3 * 1024 * 1024){
        var reader = new FileReader()
        var name = fileObj.name
        reader.readAsDataURL(fileObj) //转base64
        reader.onload = function(e) {
        var image = new Image()
        image.src = e.target.result
        image.onload = function () {
            var canvas = document.createElement('canvas'), // 新建canvas
                context = canvas.getContext('2d'),
                imageWidth = image.width,    //压缩后图片的大小
                imageHeight = image.height,
                data = ''
            canvas.width = imageWidth
            canvas.height = imageHeight
            context.drawImage(image, 0, 0, imageWidth, imageHeight)
            data = canvas.toDataURL('image/jpeg',0.86) // 压缩比例0.86，结果接近减小了一半
            var arr = data.split(','), mime = arr[0].match(/:(.*?);/)[1], // 转成blob
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            var files = new File([u8arr], name, { type: mime }) // 转成file
            deferred.resolve(files);
        }
    }
    }else{
        deferred.resolve(fileObj);
    }
    return deferred.promise();
}