【JS】图片压缩

 // js压缩图片
    /**
     * 图片压缩，默认同比例压缩
     * @param {Object} path
     *   pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径
     * @param {Object} obj
     *   obj 对象 有 width， height， quality(0-1)
     * @param {Object} callback
     *   回调函数有一个参数，base64的字符串数据
     */function dealImage(path, obj, callback){
        var img = new Image();
        img.src = path;
        console.log(img)
        img.onload = function(){
            var that = this;
            // 默认按比例压缩
            var w = that.width,
                h = that.height,
                scale = w / h;
            w = obj.width || w;
            h = obj.height || (w / scale);
            var quality = 0.7;  // 默认图片质量为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);
            // 图像质量
            if(obj.quality && obj.quality <= 1 && obj.quality > 0){
                quality = obj.quality;
            }
            // quality值越小，所绘制出的图像越模糊
            var base64 = canvas.toDataURL('image/jpeg', quality );
            // 回调函数返回base64的值
            callback(base64);
        }
    }

 demo:

//图片上传
    $('#fileinput1').change(function () {
        var file = this.files[0];
        var maxSize = 200 * 1024;   //200KB
        // console.log('before size:',file.size);
        //判断是否是图片类型
        if (!/image\/\w+/.test(file.type)) {
            alert("只能选择图片");
            return false;
        }
        //文件压缩
        var formData = new FormData();
        formData.append('file','idcard_front_image');
        formData.append('type',1);
        formData.append('filename',file.name);

        if(file.size>maxSize){
            //压缩上传
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                dealImage(this.result, {
                    width : 500
                }, function(base){
                    var afterFile= convertBase64UrlToBlob(base);
                    formData.append('idcard_front_image',afterFile,file.name);
                    uploadImage(formData,1);
                });
            }
        }else{
            formData.append('idcard_front_image',file);
            uploadImage(formData,1);
        }
    });