微信JS-SDK中getLocalImgData的坑

48 阅读 0 评论 32 点赞

我是靠谱客的博主年轻大炮，最近开发中收集的这篇文章主要介绍微信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

编码解码函数：

/** 
* 
* Base64 encode / decode 
*
* 
*/
function Base64() { 

 // private property 
 _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; 

 // public method for encoding 
 this.encode = function (input) { 
  var output = ""; 
  var chr1, chr2, chr3, enc1, enc2, enc3, enc4; 
  var i = 0; 
  input = _utf8_encode(input); 
  while (i < input.length) { 
   chr1 = input.charCodeAt(i++); 
   chr2 = input.charCodeAt(i++); 
   chr3 = input.charCodeAt(i++); 
   enc1 = chr1 >> 2; 
   enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); 
   enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); 
   enc4 = chr3 & 63; 
   if (isNaN(chr2)) { 
    enc3 = enc4 = 64; 
   } else if (isNaN(chr3)) { 
    enc4 = 64; 
   } 
   output = output + 
   _keyStr.charAt(enc1) + _keyStr.charAt(enc2) + 
   _keyStr.charAt(enc3) + _keyStr.charAt(enc4); 
  } 
  return output; 
 } 

 // public method for decoding 
 this.decode = function (input) { 
  var output = ""; 
  var chr1, chr2, chr3; 
  var enc1, enc2, enc3, enc4; 
  var i = 0; 
  input = input.replace(/[^A-Za-z0-9+/=]/g, ""); 
  while (i < input.length) { 
   enc1 = _keyStr.indexOf(input.charAt(i++)); 
   enc2 = _keyStr.indexOf(input.charAt(i++)); 
   enc3 = _keyStr.indexOf(input.charAt(i++)); 
   enc4 = _keyStr.indexOf(input.charAt(i++)); 
   chr1 = (enc1 << 2) | (enc2 >> 4); 
   chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); 
   chr3 = ((enc3 & 3) << 6) | enc4; 
   output = output + String.fromCharCode(chr1); 
   if (enc3 != 64) { 
    output = output + String.fromCharCode(chr2); 
   } 
   if (enc4 != 64) { 
    output = output + String.fromCharCode(chr3); 
   } 
  } 
  output = _utf8_decode(output); 
  return output; 
 } 

 // private method for UTF-8 encoding 
 _utf8_encode = function (string) { 
  string = string.replace(/rn/g,"n"); 
  var utftext = ""; 
  for (var n = 0; n < string.length; n++) { 
   var c = string.charCodeAt(n); 
   if (c < 128) { 
    utftext += String.fromCharCode(c); 
   } else if((c > 127) && (c < 2048)) { 
    utftext += String.fromCharCode((c >> 6) | 192); 
    utftext += String.fromCharCode((c & 63) | 128); 
   } else { 
    utftext += String.fromCharCode((c >> 12) | 224); 
    utftext += String.fromCharCode(((c >> 6) & 63) | 128); 
    utftext += String.fromCharCode((c & 63) | 128); 
   } 

  } 
  return utftext; 
 } 

 // private method for UTF-8 decoding 
 _utf8_decode = function (utftext) { 
  var string = ""; 
  var i = 0; 
  var c = c1 = c2 = 0; 
  while ( i < utftext.length ) { 
   c = utftext.charCodeAt(i); 
   if (c < 128) { 
    string += String.fromCharCode(c); 
    i++; 
   } else if((c > 191) && (c < 224)) { 
    c2 = utftext.charCodeAt(i+1); 
    string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); 
    i += 2; 
   } else { 
    c2 = utftext.charCodeAt(i+1); 
    c3 = utftext.charCodeAt(i+2); 
    string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); 
    i += 3; 
   } 
  } 
  return string; 
 } 
}

//1.加密 
var base = new Base64(); 
var result = base.encode(localData);

编码之后拿到的结果就跟ios保持一致了。

当然最好的方式是选择完图片之后通过以下接口上传到文件服务器。

wx.uploadImage({
    localId: '', // 需要上传的图片的本地ID，由chooseImage接口获得
    isShowProgressTips: 1, // 默认为1，显示进度提示
    success: function (res) {
        var serverId = res.serverId; // 返回图片的服务器端ID
    }
});