必踩坑!在微信sdk呼叫chooseImage獲取圖片後採取getLocalImgData轉換base64

Titan_star發表於2018-06-19

開發產品的第2階段中,由於使用者需要使用簽到打卡的圖片進行引導分享,在使用者上傳中針對圖片進行壓縮後返回撥用,在此之前採用過canvase進行壓縮,但專案時間緊迫需要進行一定的相容和改善後就放棄了(程式碼健壯性必須要全面滴)!

因為產品使用的是微信sdk,所以果斷就呼叫內部介面進行處理!直接開門見山~

一、配置環境的首要條件中引入微信sdk(必須在1.2版本或以上!)

二、在wx.config需要申明註冊的呼叫介面
wx.config({
debug: false,
appId: 'xxxx',
timestamp: 'xxxx',
nonceStr: 'xxxx',
signature: 'xxxx',
jsApiList: [
'chooseImage',
'getLocalImgData',//插播一段提示,1.2版本以下被棄用了的、而且在微信工具是檢測不了註冊的,謹記!
]
});

三、直接開擼程式碼貼提示(vue中的開發環境)
const self=this;
wx.chooseImage({
count: 1, // 預設9 // 選擇圖片數量,選項採用只能選擇1張圖片
sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖,選項採用壓縮圖
sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機,預設二者都有
success: function (req) {
wx.getLocalImgData({
localId: req.localIds[0].toString(), // 圖片的localID為第1個
success: function (res) {
const localData = res.localData;
// localData是圖片的base64資料,可以用img標籤顯示
//因為安卓、蘋果的處理方式不同(我們不一樣!),在此做了些特殊的處理!
if(localData.indexOf('data:image') == 0){ //判斷轉換中是否帶'data:image'
//蘋果的直接賦值,預設生成'data:image/jpeg;base64,'的頭部拼接
self.image=localData;
}else{
//此處是安卓中的唯一得坑!在拼接前需要對localData進行換行符的全域性替換
//感興趣的可以自行console或代理除錯看看~老司機都懂~
//此時一個正常的base64圖片路徑就完美生成賦值到img的src中了
self.image="data:image/jpeg;base64,"+localData.replace(/\n/g,"");
}
}
});
}
});

相關文章