关于javascript:75js前端压缩图片

html:

<span class="f-db tit"> 上传图片：</span>
                <div class="info">
                    <input type="file" accept='image/*' class="text" id="pic" onchange="readAsDataURL1()" multiple/>
                </div>

js:

function readAsDataURL1(){var formData = new FormData();
        var fileObj = $("#pic")[0].files[0];
        if(!fileObj){return;}
        if(fileObj.size/1024>1024){photoCompress(fileObj,{ quality: 0.2},function(base64Codes){var bl = convertBase64UrlToBlob(base64Codes)
                var fileName = fileObj.name;
                formData.append("imgFile", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
                $.ajax({
                    url : ctx+'/qyapi/img-upload.do',
                    async:false,
                    type : 'post',
                    data : formData,
                    processData : false,
                    contentType : false,
                    success : function(value) {var result = JSON.parse(value);
                        if(parseInt(result.code)>0){
                            picShow.innerHTML = '<img data-original="'+result.url+'"src="'+result.url+'"alt="" style="width:95%;max-height: 500px;"/>';
                            $("#url").val(result.url+splitStr+fileName);
                            setTimeout(function (){resetViewer();
                            },3000)

                        }else{alert(result.msg);
                        }
                    }
                });
            });
        }

    }

/*
        三个参数
        file：一个是文件 (类型是图片格式)，w：一个是文件压缩的后宽度，宽度越小，字节越小
        objDiv：一个是容器或者回调函数
        photoCompress()
         */
    function photoCompress(file,w,objDiv){var ready=new FileReader();
        /* 开始读取指定的 Blob 对象或 File 对象中的内容. 当读取操作实现时,readyState 属性的值会成为 DONE, 如果设置了 onloadend 事件处理程序, 则调用之. 同时,result 属性中将蕴含一个 data: URL 格局的字符串以示意所读取文件的内容.*/
        ready.readAsDataURL(file);
        ready.onload=function(){
            var re=this.result;
            canvasDataURL(re,w,objDiv)
        }
    }
    function canvasDataURL(path, obj, callback){var img = new Image();
        img.src = path;
        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);
        }
    }
    
    /**
     * 将以 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});
    }