JS 对 Base64 图片做简单压缩、裁剪处理（记录）

比眉伴天荒 2021-06-24 16:10 968阅读 0赞

## 图片压缩处理： ##

/**
     * 以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)
        }
    }