js压缩图片

 有两个需要注意的点：

 

var base64 = canvas.toDataURL('image/jpeg', quality);

1、其中在输出图片base64时，可选的格式除了jpeg外还有png，webp等，从图片质量的角度看推荐使用webp，但webp在没有img标签时不能直接通过浏览器打开。

2、通过canvas输出base64格式的图片不能直接通过表单上传到服务器，还需要多做一步转化成Blob.

 

下面是完整的代码

 

HTML代码

<div class="upload">
    <div id="uploaded" class="uploaded">
        <!-- <img id="imgPreview" src="images/avatar.png" alt=""> -->
        <a href="javascript:;"><input id="files" type="file" onchange="readFile(this)" accept="image/*"/></a>
    </div>
    <p>上传照片，请注意隐藏图片中的隐私信息</p>
</div>

JS代码

var imgUrl = [];
    var imgId = 0;

    function readFile(obj) {
        // show loading
        var html = '<span class="img loading" ><img  src="/images/app/loading.gif" alt=""></span>';
        $("#uploaded").append(html);
        imgloading = true;

        var file = obj.files[0];
        //判断类型是不是图片
        if (!/image\/\w+/.test(file.type)) {
            alert("请确保文件为图像类型");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            dealImage(this.result, {width: 200}, function (base) {
                var blob = convertBase64UrlToBlob(base);
                var formData = new FormData();
                formData.append('files', blob);
                $.ajax({
                    type: "POST",
                    url: "/complaint/saveImg",
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    success: function (data) {
                        if (data.status == 1) {
                            imgUrl.push(data.imgUrl);
                            imgId += 1;
                            var html = '<span class="img" id="' + imgId + '"><a class="del" onClick=\"delImg(\'' + data.imgUrl + '\',' + imgId + ');\"></a><img  src="' + base + '" alt=""></span>';
                            try {
                                $("#uploaded").find('.loading').eq(0).remove();
                            } catch (e) {
                            }

                            $("#uploaded").append(html);
                        } else {
                            alert('上传失败')
                            try {
                                $("#uploaded").find('.loading').eq(0).remove();
                            } catch (e) {
                            }

                        }
                        imgloading = false;
                        return;
                    },error:function () {
                        alert('上传失败');
                        try {
                            $("#uploaded").find('.loading').eq(0).remove();
                        } catch (e) {
                        }

                        imgloading = false;
                    }
                });
            });
        }
    }

    /**
     * 图片压缩，默认同比例压缩
     * @param {Object} path
     * pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径
     * @param {Object} obj
     * obj 对象 有 width， height， quality(0-1)
     * @param {Object} callback
     * 回调函数有一个参数，base64的字符串数据
     */
    function dealImage(path, obj, callback) {
        if (path.length <= 640 * 1024) {
            callback(path);
            return;
        }
        var img = new Image();
        img.src = path;
        img.onload = function () {
            var that = this;
            // 默认按比例压缩
            var w = that.width,
                h = that.height;
            var quality = 0.8; // 默认图片质量为0.7
            //生成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);
            ctx.drawImage(that, 0, 0, w, h);

            //计算压缩质量比
            quality = (640 * 1024) / path.length;

            // quality值越小，所绘制出的图像越模糊
            var base64 = canvas.toDataURL('image/jpeg', quality);
            // 回调函数返回base64的值
            callback(base64);
        }
    }

    /**
     * 将以base64的图片url数据转换为Blob
     * @param urlData
     * 用url方式表示的base64图片数据
     */
    function convertBase64UrlToBlob(urlData) {
        var arr = urlData.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 Blob([u8arr], {type: mime});
    }

    //删除图片
    function delImg(picUrl, imgId) {
        var index = imgUrl.indexOf(picUrl);
        if (index >= 0) {
            imgUrl.splice(index, 1);
            $("#" + imgId).remove();
        }
    }