关于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});    }