js 压缩图片处理方式

    var img_yz;
    function readURL(input) {
        img_yz = new Image();
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {      
                        img_yz.src = e.target.result;
                    }
                    reader.readAsDataURL(input.files[0]);               
                }
        }
    $("#imgInp").change(function () {
        readURL(this);
    });
//下面是重点
function compress(file) {
        // 压缩到图片原始宽高的一半
        var w = file.naturalWidth / 2;
        var h = file.naturalHeight / 2;
        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.fillRect(0, 0, w, h);
        ctx.drawImage(file, 0, 0, w, h);
        //可以根据base64 做相关的预览功能 这里就不演示了
        const base64 = canvas.toDataURL('image/jpeg', 0.75);// 压缩后质量
        const bytes = window.atob(base64.split(',')[1]);
        const ab = new ArrayBuffer(bytes.length);
        const ia = new Uint8Array(ab);
        for (var i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }
        blob = new Blob([ab], {type: 'image/jpeg'});
        // 预览压缩后的图片
        return blob;
    }

console.log(compress(img_yz));

//进度条
            xhr: function(){
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){
                  myXhr.upload.addEventListener('progress',function(e) {
                    if (e.lengthComputable) {
                    var percent = Math.floor(e.loaded/e.total*100);
                    }
                  }, false);
                }
                return myXhr;
            },