前端图片压缩上传

最近公司有个需求，就是上传照片时需要先压缩。
其中上传原理是用ajax上传formdata数据，压缩是采用canvas进行处理。

一、文件选择控件

<input type="file" id="fieldid" onchange="compressImg(this)" accept="image/*"/>

二、获取图片文件

var fileObj = document.getElementById(fieldid).files[0]; // js 获取文件对象

三、图片压缩处理

利用canvas处理Image对象调整像素尺寸，输出base64格式，再将base64格式转换为blob对象，再放进formdata对象

function compressImg(callback) {
        var file = fileObj ;
        var reader = new FileReader();
        reader.readAsDataURL(file);
        // 缩放图片需要的canvas
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        reader.onload=function () {
          var content = this.result; //图片的src，base64格式
          var img = new Image();
          img.src = content;
          img.onload = function (){ //图片加载完毕
            // 图片原始尺寸
            var originWidth = this.width;
            var originHeight = this.height;
            // 最大尺寸限制，可通过国设置宽高来实现图片压缩程度
            var maxWidth = 800,
                maxHeight = 800;
            // 目标尺寸
            var targetWidth = originWidth
            var targetHeight = originHeight;
            // 图片尺寸超过400x400的限制
            if(originWidth > maxWidth || originHeight > maxHeight) {
                if(originWidth / originHeight > maxWidth / maxHeight) {
                    // 更宽，按照宽度限定尺寸
                    targetWidth = maxWidth;
                    targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                } else {
                    targetHeight = maxHeight;
                    targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                }
            }
            // canvas对图片进行缩放
            canvas.width = targetWidth;
            canvas.height = targetHeight;
            // 清除画布
            context.clearRect(0, 0, targetWidth, targetHeight);
            // 图片压缩
            context.drawImage(img, 0, 0, targetWidth, targetHeight);
            /*第一个参数是创建的img对象；第二个参数是左上角坐标，后面两个是画布区域宽高*/
            //压缩后的图片base64 url
            /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/jpeg';
             * qualityArgument表示导出的图片质量，只要导出为jpg和webp格式的时候此参数才有效果，默认值是0.92*/
            var dataURL = canvas.toDataURL(file.type||"image/jpeg", 0.92);//base64 格式
            // let blob = dataURItoBlob(dataURL,file.name);
            let newFile = dataURItoBlob(dataURL,file.name);
            let  formData = new FormData();
            // formData.append(option.fileName,blob);
            formData.append(option.fileName,newFile,file.name);
            callback(formData);
          }
        };
      };
function dataURItoBlob(dataurl,filename){   //dataurl是base64格式
        var arr = dataurl.split(',');
        var mime = arr[0].match(/:(.*?);/)[1];
        var bstr = atob(arr[1]);
        var n = bstr.length;
        var u8arr = new Uint8Array(n);
        while(n--){
          u8arr[n] = bstr.charCodeAt(n);
        }
        //发现ios11不支持new File()
        // let newFile = new File([u8arr], filename, {
        //   type: mime || "image/jpeg"
        // });
        // return newFile;
        return new Blob([u8arr], {type:mime || "image/jpeg"});
      };

四、ajax上传formdata

function imgUploader(formdata) {
   $.ajax({
    url : '/save_photos/',
    type : "POST",
    data : formData,
    dataType:"json",
    processData : false,         // 告诉jQuery不要去处理发送的数据
    contentType : false,        // 告诉jQuery不要去设置Content-Type请求头
    seccess:   function(res){} ,
    error: function(res){}
})
}
compressImg(imgUploader);

总结

上传文件用formdata，图像处理用canvas。