有個需求要在微信企業號里面做開發,有個功能是選擇圖片,使用input標簽肯定是不管用了,Android手機上不能多選,所以使用了微信的JS-SDK提供的相關API,這個地方真的是有坑,記錄一下。按照文檔直接引入js文件即可,如果使用的是Vue,也可以使用weixin-js-sdk
,兩種方式都可以。
圖片在Android上無法預覽
js-sdk的chooseImage
接口返回的結果是localId,類似于wxLocalResource://xxxxxx
,如果想得到它的base64串需要再調用getLocalImgData
方法,因為我們后臺接口里需要用到這個base64串,所以通過這個接口來獲取base64串作展示,而不是用文檔里介紹的方法。那這里有個坑,從Android獲取的localData是不帶有base64前綴的,要處理一下。
selectImage: function () { let context = this; wx.chooseImage({ count: 9, sizeType: ['compressed'], sourceType: ['album', 'camera'], defaultCameraMode: "normal", success: function (res) { // localIds是在data里定義的一個localId數組 context.localIds = res.localIds; // 不能直接遍歷這個數組 context.updateBase64Data(context.localIds.shift()); }, fail: function (res) { alert('選擇圖片失敗:' + res.errMsg); }, });},updateBase64Data: function (localId) { let context = this; wx.getLocalImgData({ localId: localId, // 圖片的localID success: function (res) { let localData = res.localData; let prefix = 'base64,'; let index = localData.indexOf(prefix); let actData = localData; // 我現在是設置參數,如果是展示的話則應該是添加頭部data:image/jpeg;base64, if (index > -1) { actData = localData.substring(index + 7); } // base64Array是在data里定義的一個base64串數組 context.base64Array.push(actData); if (context.localIds.length > 0) { context.updateBase64Data(context.loaclIds.shift()); } else { // 執行處理 } }, fail: function (res) { alert('選擇圖片失敗:' + res.errMsg); }, });},
getLocalImgData獲取多張圖片無響應
chooseImage
方法獲取到是一個localId的數組,如果直接遍歷這個數組去調用getLocalImgData
時它只會執行一次,后面的無論怎樣都不會執行,猜測應該是跟它localId的獲取有關系。所以采取了上面代碼中遞歸的方式調用,當連續調用uploadImage
上傳圖片時也要這么做。
Android無法選擇原圖
盡管在chooseImage方法可以通過sourceType字段指定是原圖還是壓縮后的圖,但是只要調用了getLocalImgData方法,那獲取到的base64串展示一定是模糊的。你在想是不是Android上面不能使用原圖啊,錯了,仔細看IOS上面的圖也是不清楚的,測試發現確實是這樣,原圖1.8M,使用js-sdk選擇的原圖只有不到240K,那為什么Android會模糊但是IOS比較清楚呢,你是不是又想這不是IOS和Android系統的區別吧,把同一張圖片通過getLocalImgData方法獲取到的base64串做比對發現,Android上得到的base64串前綴是以gCM開頭,而IOS則是以/9j/開頭,從PC上選擇的圖也是以/9j/開頭,自己解析的圖片也是以/9j/開頭,所以不是因為壓縮變模糊了,是因為使用了不一樣的編碼變模糊了。如果真的想選擇原圖,先把圖片上傳到微信服務器,然后使用獲取臨時素材的接口https://qyapi.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID,把圖片下載下來,經測試這樣其實也是有壓縮的,這個是企業號的API如果用公眾號地址是https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID。代碼就不貼了,與上面的基本一致。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答