在做微信公众号开发时,常需要用到图片上传。因此我们需要调用微信接口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码 if(resTwo.localData.indexOf(";base64,")==-1){//兼容处理,安卓获取的图片base64码没有前缀,而苹果有,base64前缀并不固定 resTwo.localData = "data:image/jpeg;base64," + resTwo.localData;//加上base64前缀 } if(resTwo.localData.indexOf("data:image/jgp;base64,")!=-1){//兼容处理,若是苹果手机,将前缀中的jgp替换成jpeg resTwo.localData=resTwo.localData.replace("data:image/jgp;base64,","data:image/jpeg;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