需求描述:
在一个页面里显示两张图片,一张静态图,一张用户从相册或者拍照获取的图,然后将这两张图片合并,并保存。
问题描述:
为了方便快捷,笔者直接使用了html2canvas来进行截图,省去了自己操作绘制canvas的麻烦,在操作过程中,使用微信的chooseImage方法调用了手机相册,并且选中了一张图,并成功的在页面上显示,然后手动执行了截图操作,这时候,在IOS上并没有出现什么问题,获取的图片可以正常生成图片,但是在安卓上,生成的图片并没有显示从相册获取的图片。
原因分析:
在安卓环境下,html2canvas在微信中将获取的图片当成了外部图片,不能有效生成,既然如此,将图片转成base64数据肯定可以。
解决方案:
思路:将微信从相册获取到的图片转成base64,然后再执行html2canvas的转换操作。
这时,又碰到了问题,如何将图片转成base64,这时,有读者就想了,到这里就简单了,然后按照常用的思路来操作一番:创建canvas元素,然后new Image(),然后将img放到canvas中,然后导出base64数据,结果发现页面上没有图片,微信开发者工具还报错,生成的img的src获取不到chooseImage返回的路径图片。
正解:wxjsSDK提供了getLocalImgData方法,该方法会返回对应图片的base64数据,我们直接使用此方法即可,但是因为安卓和IOS返回的数据格式有差异,仍然要做点兼容。
处理代码如下:
/**
* 获取本地图片接口
*/
getLocalImgData(localId) {
return new Promise((resolve, reject) => {
WechatPlugin.$wechat.getLocalImgData({
localId: localId, // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
if (localData.substr(0, 5) != 'data:') {
localData = 'data:image;base64,' + localData;
}
// 返回base64数据
resolve(localData);
},
fail: function (err) {
reject(err);
}
});
});
},
上述代码中WechatPlugin是vuxUI框架的微信jssdk插件,使用过的朋友一看便知,至此,安卓和IOS可以正常显示生成个图片了。