微信公众号wx.chooseImage选中图片后获取图片大小并压缩 |
您所在的位置：网站首页 › 公众号图片怎么调整大小kb › 微信公众号wx.chooseImage选中图片后获取图片大小并压缩 |
|
在做微信公众号开发时，常需要用到图片上传。因此我们需要调用微信接口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 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |