詳解微信JS-SDK選擇圖片遇到的坑
有個(gè)需求要在微信企業(yè)號(hào)里面做開發(fā),有個(gè)功能是選擇圖片,使用input標(biāo)簽肯定是不管用了,Android手機(jī)上不能多選,所以使用了微信的JS-SDK提供的相關(guān)API,這個(gè)地方真的是有坑,記錄一下。按照文檔直接引入js文件即可,如果使用的是Vue,也可以使用weixin-js-sdk
,兩種方式都可以。
圖片在Android上無法預(yù)覽
js-sdk的chooseImage
接口返回的結(jié)果是localId,類似于wxLocalResource://xxxxxx
,如果想得到它的base64串需要再調(diào)用getLocalImgData
方法,因?yàn)槲覀兒笈_(tái)接口里需要用到這個(gè)base64串,所以通過這個(gè)接口來獲取base64串作展示,而不是用文檔里介紹的方法。那這里有個(gè)坑,從Android獲取的localData是不帶有base64前綴的,要處理一下。
selectImage: function () { let context = this; wx.chooseImage({ count: 9, sizeType: ['compressed'], sourceType: ['album', 'camera'], defaultCameraMode: "normal", success: function (res) { // localIds是在data里定義的一個(gè)localId數(shù)組 context.localIds = res.localIds; // 不能直接遍歷這個(gè)數(shù)組 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; // 我現(xiàn)在是設(shè)置參數(shù),如果是展示的話則應(yīng)該是添加頭部data:image/jpeg;base64, if (index > -1) { actData = localData.substring(index + 7); } // base64Array是在data里定義的一個(gè)base64串?dāng)?shù)組 context.base64Array.push(actData); if (context.localIds.length > 0) { context.updateBase64Data(context.loaclIds.shift()); } else { // 執(zhí)行處理 } }, fail: function (res) { alert('選擇圖片失敗:' + res.errMsg); }, }); },
getLocalImgData獲取多張圖片無響應(yīng)
chooseImage
方法獲取到是一個(gè)localId的數(shù)組,如果直接遍歷這個(gè)數(shù)組去調(diào)用getLocalImgData
時(shí)它只會(huì)執(zhí)行一次,后面的無論怎樣都不會(huì)執(zhí)行,猜測(cè)應(yīng)該是跟它localId的獲取有關(guān)系。所以采取了上面代碼中遞歸的方式調(diào)用,當(dāng)連續(xù)調(diào)用uploadImage
上傳圖片時(shí)也要這么做。
Android無法選擇原圖
盡管在chooseImage方法可以通過sourceType字段指定是原圖還是壓縮后的圖,但是只要調(diào)用了getLocalImgData方法,那獲取到的base64串展示一定是模糊的。你在想是不是Android上面不能使用原圖啊,錯(cuò)了,仔細(xì)看IOS上面的圖也是不清楚的,測(cè)試發(fā)現(xiàn)確實(shí)是這樣,原圖1.8M,使用js-sdk選擇的原圖只有不到240K,那為什么Android會(huì)模糊但是IOS比較清楚呢,你是不是又想這不是IOS和Android系統(tǒng)的區(qū)別吧,把同一張圖片通過getLocalImgData方法獲取到的base64串做比對(duì)發(fā)現(xiàn),Android上得到的base64串前綴是以gCM開頭,而IOS則是以/9j/開頭,從PC上選擇的圖也是以/9j/開頭,自己解析的圖片也是以/9j/開頭,所以不是因?yàn)閴嚎s變模糊了,是因?yàn)槭褂昧瞬灰粯拥木幋a變模糊了。如果真的想選擇原圖,先把圖片上傳到微信服務(wù)器,然后使用獲取臨時(shí)素材的接口https://qyapi.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID,把圖片下載下來,經(jīng)測(cè)試這樣其實(shí)也是有壓縮的,這個(gè)是企業(yè)號(hào)的API如果用公眾號(hào)地址是https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID。代碼就不貼了,與上面的基本一致。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
利用JavaScript將普通數(shù)字轉(zhuǎn)換為帶有千分位分隔符格式的多種實(shí)現(xiàn)方法
如何利用 JavaScript 將普通數(shù)字轉(zhuǎn)換為帶有千分位分隔符的格式,我們將介紹多種方法,包括使用內(nèi)置的 toLocaleString() 方法、Intl.NumberFormat 對(duì)象以及自定義函數(shù)來實(shí)現(xiàn)數(shù)字格式化,需要的朋友可以參考下2023-12-12js中根據(jù)字?jǐn)?shù)截取字符串,不能截?cái)鄒rl
給一個(gè)文字,對(duì)輸出的文字進(jìn)行截取,保留400個(gè)字符,其中對(duì)url的保留比較麻煩,尤其是有兩個(gè)相同url時(shí)不能采用indexOf獲取其字符位置2012-01-01JS根據(jù)瀏覽器窗口大小實(shí)時(shí)動(dòng)態(tài)改變網(wǎng)頁文字大小的方法
這篇文章主要介紹了JS根據(jù)瀏覽器窗口大小實(shí)時(shí)動(dòng)態(tài)改變網(wǎng)頁文字大小的方法,涉及JavaScript針對(duì)頁面寬高的動(dòng)態(tài)獲取與元素樣式動(dòng)態(tài)運(yùn)算的相關(guān)技巧,需要的朋友可以參考下2016-02-02使用原生的javascript來實(shí)現(xiàn)輪播圖
這篇文章主要介紹了使用原生的javascript來實(shí)現(xiàn)輪播圖,在代碼底部給大家補(bǔ)充了原生javascript實(shí)現(xiàn)banner圖自動(dòng)輪播切換 ,需要的朋友可以參考下2017-02-02JavaScript設(shè)計(jì)模式之中介者模式詳解
當(dāng)對(duì)象之間進(jìn)行多對(duì)多引用時(shí),進(jìn)行開發(fā),維護(hù),閱讀時(shí)將變得特別痛苦。在這些對(duì)象之間添加中間者,使它們都只與中介者,當(dāng)中介者處理完一個(gè)對(duì)象的請(qǐng)求后,將結(jié)果通知于其他對(duì)象2022-08-08快速查找數(shù)組中的某個(gè)元素并返回下標(biāo)示例
最近在寫jquery的combobox插件時(shí)遇到效率問題,再加上jquery選擇器的類帥選,導(dǎo)致效率很慢,采用以下方式二,可以輕松解決此問題2013-09-09用Div仿showModalDialog模式菜單的效果的代碼
用Div仿showModalDialog模式菜單的效果的代碼...2007-03-03js toFixed()方法的重寫實(shí)現(xiàn)精度的統(tǒng)一
凡用過js 中的toFix() 方法的, 應(yīng)該都知道這個(gè)方法存在一個(gè)小小的BUG,在IE 下和FF 下對(duì)于小數(shù)的進(jìn)位有點(diǎn)不同2014-03-03