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

时间:2020-04-03 01:00:54   收藏:0   阅读:111

  在做微信公众号开发时,常需要用到图片上传。因此我们需要调用微信接口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
评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!