微信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(/\r\n/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    }});