在做微信公众号开发时,常需要用到图片上传。因此我们需要调用微信接口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