微信JSSDK使用getLocalImgData获取图片Base64数据

通过微信JSSDK的chooseImage接口获得的图片localID已经不能当做<img>的src显示图片了。我安卓手机上的图片已经显示为空白。

连机调试，遇到错误：
violates the following Content Security Policy directive: "default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

其实这不是安全策略的问题，而是以前的localID不能再当src使用了。

通告原文请参考《iOS WKWebview 网页开发适配指南》

投以我们需要使用新接口getLocalImgData。

首先，要在前端申请这个接口：

wxSignPackage.jsApiList.push('getLocalImgData','chooseImage');

之后，在页面加载完成后要验证当前客户端是否支持getLocalImgData接口

wx.checkJsApi({
  jsApiList: ['getLocalImgData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
  success: function(res) {// 以键值对的形式返回，可用的api值true，不可用为false
    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
  }
});

接下来，用chooseImage选中图片之后，就可调用

wx.chooseImage({
  count: 9, // 默认9
  sizeType: 'original', // 可以指定是原图还是压缩图，我只要原图
  success: function (res) {
    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
    for(var i=0;i<localIds.length;i++){
      localId = localIds[i];
      wx.getLocalImgData({
        localId: localId, // 图片的localID
        success: function (res1) {
          var localData = res1.localData; // localData是图片的base64数据，可以用img标签显示
          处理((this).localId,localData);
        } //end success
      }); //end wx.getLocalImgData
    } //end for
  } //end success
}); //end function

注意，苹果IOS和Android加载出来的图像Base64数据不同!

if(localData.substr(0,5)!='data:'){
  localData='data:image;base64,'+localData;
}