微信JS-SDK中getLocalImgData的坑

经常开发微信web需求的童鞋对微信jssdk肯定不会陌生。但是里面的坑未必都踩过，特此分享这篇填坑说明。

微信获取本地图片接口：

wx.getLocalImgData({
    localId: '', // 图片的localID
    success: function (res) {
   
        var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
    }
});

上面代码的localId是从选择图片接口返回的参数得来的：

wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
   
        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
    }
});

这里有一个隐藏的bug，就是安卓拿到的localData不是base64编码的字符串。虽然微信接口文档里面说明了此接口仅在 iOS WKWebview 下提供（具体内容可去查看微信jssdk说明文档）

但是难免会遇到将选择上传的图片编码然后再提交到后台的需求。一般的做法都是将图片上传到文件服务器，而不是将图片编码然后一起提交。这种方式存在很多不科学性，但我们这里忽略这个不科学性。

真要这样做时，这里ios和android兼容性就会出现问题。

ios拿到的localData是图片准确无误的base64编码，而安卓拿到的localData不仅没有前缀data:image/jpg;base64, 而且拿到的结果也不是base64编码的字符串！！！

这里并不能通过canvas去将获取到的图片编码，因为拿到的路径不是本地图片的路径。

解决办法如下：

安卓对返回的localData再做一次base64编码，再加上编码头部data:image/jpg;base64

编码解码函数：