經常開發微信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 下提供（具體內容可去檢視

但是難免會遇到將選擇上傳的圖片編碼然後再提交到後臺的需求。一般的做法都是將圖片上傳到檔案伺服器，而不是將圖片編碼然後一起提交。這種方式存在很多不科學性，但我們這裡忽略這個不科學性。

真要這樣做時，這裡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
    }
});