微信JS-SDK選擇圖片遇到的坑

微信JS-SDK選擇圖片遇到的坑

有個需求要在微信企業號裏面作開發，有個功能是選擇圖片，使用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。代碼就不貼了，與上面的基本一致。

來源：http://www.javashuo.com/article/p-wmydpclk-bc.html