html2canvas在安卓端微信里截取从相册打开的图片空白问题

需求描述：
在一个页面里显示两张图片，一张静态图，一张用户从相册或者拍照获取的图，然后将这两张图片合并，并保存。

问题描述：
为了方便快捷，笔者直接使用了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可以正常显示生成个图片了。

---

欢迎关注博主：小圣贤君，有问题可以留言哦~