JS 对 Base64 图片做简单压缩、裁剪处理

图片压缩处理：

/**
 * 以obj.height 为基准 压缩
 * baseImage base64 图片
 * obj { width: 900, height: 35 }
 * quality 图像质量  0 - 1   1 质量越高
 */
function imageCompression(baseImage,obj,quality,callback) {
    var img = new Image();
    img.src = baseImage;
    img.onload = function () {
        var that = this;
        var w = that.width,h = that.height;
        //按照h 压缩后的base64 和 width
        var compressionResult,compressionWidth,compressionHeight;
        if(h>obj.height){
            //生成canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            //创建属性节点
            var createw = document.createAttribute('width');
            var createh = document.createAttribute('height');
            h = obj.height;
            w = (h/that.height) * w;
            compressionWidth = w;
            compressionHeight = h;
            createw.nodeValue = w;
            createh.nodeValue = h;
            canvas.setAttributeNode(createw);
            canvas.setAttributeNode(createh);
            ctx.drawImage(that,0,0,w,h);
            var base64 = canvas.toDataURL('image/png', quality);
            compressionResult = base64;
        }else {
            compressionResult = baseImage;
            compressionWidth = that.width;
            compressionHeight = that.height;
        }
        //width > 默认width  做截取处理
        if (compressionWidth > obj.width){
            ClippingImage(compressionResult,obj.width,compressionHeight,quality,function (base64Clipping) {
                callback(base64Clipping);
            });
        }else {
            callback(compressionResult);
        }
 
    }
}

Base64 图片简单裁剪

/**
 * 图片截取
 * base64Codes  图片base64 码
 * 从 (0,0) 开始截取   宽高分别为 width，height
 * quality  图片质量  0 - 1 ，  1 图片质量最高
 * callback  返回的是 截取后的base64 字符串
 */
function ClippingImage(base64Codes,width,height,quality,callback) {
    var img = new Image();
    img.src = base64Codes;
    //生成canvas
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var createw = document.createAttribute('width');
    var createh = document.createAttribute('height');
    createw.nodeValue  = width;
    createh.nodeValue = height;
    canvas.setAttributeNode(createh);
    canvas.setAttributeNode(createw);
    img.onload = function () {
        ctx.drawImage(img,0,0,width,height,0,0,width,height);
        var base64Result = canvas.toDataURL('image/png', quality);
        callback(base64Result)
    }
}