微信公众号wx.chooseImage选中图片后获取图片大小并压缩

Posted 2020-11-28 陈由梅

　　在做微信公众号开发时，常需要用到图片上传。因此我们需要调用微信接口wx.chooseImage来选择手机相册中的图片或者调起相机。

　　一般而言，我们上传图片都需要对图片大小进行控制，但是微信公众号不是微信小程序，在微信公众号里，wx.getFileInfo获取图片详情的接口是不存在的，那我们要如何在wx.chooseImage选中图片后，获取图片的大小呢？

　　我翻阅了大量的资料，始终找不到方法，最后我找到了一个折中的办法：使用wx.getLocalImgData获取图片的base64码，然后通过base64码的长度计算图片大小。代码如下：

selectImage = function(){
    wx.chooseImage({
        count: 1, // 选择图片张数，默认9，本示例只测试一张图片
        sizeType: [‘original‘, ‘compressed‘], // 指定是原图还是压缩图，默认二者都有
        sourceType: [‘album‘, ‘camera‘], // 指定来源是相册还是相机，默认二者都有
        success: function (res) {
            console.log(res.localIds[0]);//打印获取到的图片地址
            try{
                //图片转base64，使用jssdk最新的js文件
                wx.getLocalImgData({
                    localId: res.localIds[0],//图片的本地ID
                    success: function (resTwo) {
                        console.log(resTwo.localData);//打印获取到的图片base64码
                        //这样计算出来的图片大小与图片实际大小有一定差别，一般会比原图大30%的样子，猜测可能是wx.chooseImage导致图片变大了。不过大体能用
                        console.log("图片大小：" + resTwo.localData.length / 1024 / 1.3 + "KB");//打印计算出来的图片大小
                        //计算压缩比例（按压缩到100kb计算）：压缩比例 = (图片大小/100)再开根号再取整
                        //由于开跟、取整等操作，压缩比例存在一定偏差，但是大体能用
                        var prop = parseInt(Math.sqrt(resTwo.localData.length / 102400 / 1.3));
                        console.log(prop);//打印压缩比例
                        if(prop > 1){//若图片>100kb，即压缩比例>1，压缩图片
                            compressedImg(resTwo.localData,prop);//使用canvas压缩图片
                        }else{//否则，可以直接使用该图片
                            console.log(resTwo.localData);
                        }
                    },fail: function(resTwo){
                        console.log(resTwo.localData);//打印报错信息
                    }
                });
            }catch(e){
                alert(e);//打印报错信息
            }
        }
    });
};

//使用canvas压缩图片
compressedImg = function(path,prop){
    var img = new Image();
    img.src = path;
    img.onload = function () {
        var that = this;
        // 按压缩比例进行压缩
        var w = that.width/prop,
            h = that.height/prop;
        // console.log(w);
        // console.log(h);
        var quality = 1;  // 默认图片质量为1
        //生成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);
        // quality值越小，所绘制出的图像越模糊
        var imgUrl = canvas.toDataURL(‘image/jpeg‘, quality);//压缩后的图片base64码
        console.log(imgUrl);//打印压缩后的图片base64码
        console.log("压缩后：" + imgUrl.length / 1024 + "KB");
    }
};

　　通过这样计算出来的图片大小与图片实际大小有一定差别，一般会比原图大30%的样子，猜测可能是wx.chooseImage导致图片变大了。另外由于开根和取整，压缩比例也有一定偏差，不过大体能用。
　　另外就是，一定要用jssdk最新的js文件，以免出错。jssdk具体配置方法大家可以查阅微信公众号官方开发文档，jssdk最新js文件我也放在下面：
　　微信公众号官方开发文档
　　jweixin-1.6.0.js