js 压缩图片及ajax上传图片

最近做的一个微信活动中需要用到图片上传功能，具体就是用户通过手机拍照上传图片来参与活动。在测试的过程中我们发现上传的图片非常大。我们知道现在的手机拍出的图片都非常的大，一般是2~5M，甚至10多M的都有。这么大的图片上传上来，用户的上传体验非常不好，而且给服务器带宽增加了很大的压力，服务器的磁盘空间也会被渐渐撑爆，即使改成上传到oss，也不是很好的办法。于是前端同事就想到先用js压缩图片再上传。我就跟着偷偷学习一下。

js压缩图片

/**
 * js压缩图片
 * @param file 图片文件对象
 * @param quality 压缩倍率 0~1
 * @constructor
 */
function compressImage(file, quality) {

    // 图片小于1M不压缩
    if (file.size < Math.pow(1024, 2)) {
        return file;
    }
    //默认0.5倍压缩
    quality = quality || 0.5;
        
    //保存文件名，后边用到
    var name = file.name; 
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        var src = e.target.result;

        var img = new Image();
        img.src = src;
        img.onload = function (e) {
            var w = img.width;
            var h = img.height;
            //生成canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            // 创建属性节点
            var anw = document.createAttribute("width");
            anw.nodeValue = w;
            var anh = document.createAttribute("height");
            anh.nodeValue = h;
            canvas.setAttributeNode(anw);
            canvas.setAttributeNode(anh);

            //铺底色 PNG转JPEG时透明区域会变黑色
            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, w, h);

            ctx.drawImage(img, 0, 0, w, h);
            // quality值越小，所绘制出的图像越模糊
            var base64 = canvas.toDataURL('image/jpeg', quality); //图片格式jpeg或webp可以选0-1质量区间

            // 返回base64转blob的值
            console.log('\u539F\u56FE' + (src.length / 1024).toFixed(2) + 'kb', '\u65B0\u56FE' + (base64.length / 1024).toFixed(2) + 'kb');
            //去掉url的头，并转换为byte
            var bytes = window.atob(base64.split(',')[1]);
            //处理异常,将ascii码小于0的转换为大于0
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i);
            }
            //通过Blob生成新图片文件对象
            file = new Blob([ab], { type: 'image/jpeg' });
            //这里需要重新设置文件名
            file.name = name;

            return file;
        };
        img.onerror = function (e) {
            console.error(e)
        };
    };
    reader.onerror = function (e) {
       console.error(e)
    };
};

主要用到的原生组件：FileReader、Canvas、Blob、FormData

逻辑步骤：

1. FileReader.readAsDataURL将上传的图片文件转为Base64格式
2. 将img绘制到canvas上，canvas.toDataURL压缩图片
3. new Blob将压缩后的Base64转为Blob格式
4. FormData.append将图片文件数据存入formdata

注意问题：

1. PNG转JPEG时PNG格式的透明区域会变黑色，需要先手动铺底色
2. toDataURL参数为PNG时不支持传图片质量，所以需要写image/jpeg或image/webp，具体可以参考toDataURL的api
3. 需要先保存文件名，然后生成新的图片后设置文件名为原来的文件名。
4. formData.append第三个参数filename是有浏览器兼容性问题的，如果不传，图片到后台的文件名会变成blob (filename=blob)，后端校验文件名可能过不去。我们就遇到了这个问题。

ajax 上传文件

/**
 * ajax上传文件
 * @param file 文件对象
 */
function upload(file) {
    var formData = new FormData();
    formData.append("file", file, file.name);
    $.ajax({
        url: 'asianCup/uploadBarCode',
        dataType: 'json',
        type: "POST",
        cache: false, 
        contentType: false, //必须
        processData: false, //必须
        data: formData,
        async: true,
        success: function (data) {
            if (data.success) {
                alert("上传成功");
            } else {
                //异常提示
                alert(data.code + "-" + data.msg);
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.error(errorThrown);
            if (XMLHttpRequest.responseText.indexOf("400") > -1) {
                //接口或参数出错
                alert("网络不给力，请稍后再试！");
            } else {
                //服务器重启
                alert("网络不给力，请稍后再试！");
            }
        }
    });
}

ajax上传文件需要构建一个formDate对象，将文件appendj进去，然后把formDate对象放到ajax的data参数即可，如果页面本身已经有表单了，也可以直接放到data，并且下面二个参数是必须的：

contentType: false,//必须false才会自动加上正确的Content-Type
processData: false,//必须false才会避开jQuery对 formdata 的默认处理，XMLHttpRequest会对 formdata 进行正确的处理

参考
js压缩图片
ajax上传图片
压缩及上传