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

explorer_ddf 發布于2019-08-26 12:11 / 1963人閱讀

摘要：微信選擇圖片遇到的坑有個需求要在微信企業號里面做開發，有個功能是選擇圖片，使用標簽肯定是不管用了，手機上不能多選，所以使用了微信的提供的相關，這個地方真的是有坑，記錄一下。

微信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。代碼就不貼了，與上面的基本一致。

云服務器 GPU云服務器微信js-sdk 微信網站云主機選擇選擇圖片中圖片選擇器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108197.html

vue項目接入微信JSSDK的坑

摘要：微信說明文檔分享的坑根據的文檔，很多人都是在初始化的配置的時候，傳入的當前的地址不正確。同樣的，給微信初始化的加入對應的參數。 date: 2018-12-13 15:23:09 用于記錄接入微信JS-SDK的坑，以后方便查詢第一次接入公眾號微信支付、分享、定位等等的坑的時候，心里是迷茫而又恐懼。因為，聽說坑特別多，后來發現自己的親身體驗到了這一點。支付的坑 1、當前URL未注冊 ...

lieeps 2019-08-30 15:55 評論0 收藏0
vue項目接入微信JSSDK的坑

摘要：微信說明文檔分享的坑根據的文檔，很多人都是在初始化的配置的時候，傳入的當前的地址不正確。同樣的，給微信初始化的加入對應的參數。 date: 2018-12-13 15:23:09 用于記錄接入微信JS-SDK的坑，以后方便查詢第一次接入公眾號微信支付、分享、定位等等的坑的時候，心里是迷茫而又恐懼。因為，聽說坑特別多，后來發現自己的親身體驗到了這一點。支付的坑 1、當前URL未注冊 ...

jsdt 2019-08-02 14:00 評論0 收藏0
vue項目接入微信JSSDK的坑

摘要：微信說明文檔分享的坑根據的文檔，很多人都是在初始化的配置的時候，傳入的當前的地址不正確。同樣的，給微信初始化的加入對應的參數。 date: 2018-12-13 15:23:09 用于記錄接入微信JS-SDK的坑，以后方便查詢第一次接入公眾號微信支付、分享、定位等等的坑的時候，心里是迷茫而又恐懼。因為，聽說坑特別多，后來發現自己的親身體驗到了這一點。支付的坑 1、當前URL未注冊 ...

nodejh 2019-08-23 14:24 評論0 收藏0
微信公眾號頁面(VUE)中如何配置微信JS-SDK和高德地圖,以及遇到的一些問題記錄

摘要：安裝并引入依賴包這里是說明文檔下載依賴包在需要用到的模塊引入檢查是否引入成功可以在引入的模塊中執行控制臺顯示以上代碼表示引入成功配置微信所有需要使用的頁面必須先注入配置信息，否則將無法調用開啟調試模式調用的所有的返回值會 1.安裝并引入JS-SDK依賴包這里是JS-SDK說明文檔 1.1 npm 下載依賴包 npm install weixin-js-sdk --save 1.2.在...

Joyven 2019-08-23 17:05 評論0 收藏0
node調用微信JS SDK遇到的坑

摘要：廢話不多說來說說用做服務端調用微信遇到的坑。微信都有說明不做贅述。因為以后微信返回的值才會改變，并且微信規定每天限定的訪問次數如果使用庫的話優勢可以減少對微信服務器訪問的次數提升性能。這幾天要做一個H5的頁面，之前沒做。對我來說也是一次對新領域的接觸。廢話不多說來說說用node做服務端調用微信JS SDK遇到的坑。首先講一下思路：微信JS-SDK說明文檔綁定域名引入JS文件 ...

Godtoy 2019-08-20 12:33 評論0 收藏0