js 图片压缩 居中裁剪

/*
       三个参数
       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 init_w = init_h = 0;
        if(obj.type === 'center'){
            if(that.width > that.height){
                w = that.height;
                init_w = (that.width - that.height)/2;
            }else{
                h = that.width;
                init_h = (that.height - that.width)/2;
            }
        }

        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, init_w, init_h, w, h,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);
    }
}

/**
 * 图片压缩
 * @param e
 * @param callback
 */
function setImagePreview(e,callback) {

    var fileMsg = e.files[0];
    if(fileMsg==null){
        return;
    }
    //文件名
    var fileName = fileMsg.name;
    //大小 字节
    var fileSize = fileMsg.size;

    /*调用
    * fileMsg 是input type="file" 的值
    * quality 压缩图片质量 范围是（0-1）
    * base64Codes  就是最终压缩成的图片
    */
    photoCompress(fileMsg, {
        quality: 1,
        type:'center'
    }, function(base64Codes){
        callback(base64Codes);
    });
}

html中调用

<input class="btn takepicture" type="file" name="img5q" id="img5q" accept="image/*"   onchange="javascript:setImagePreview(this,callback);"/>