微信js-sdk預(yù)覽圖片接口及從拍照或手機(jī)相冊(cè)中選圖接口用法示例
本文實(shí)例講述了微信js-sdk預(yù)覽圖片接口及從拍照或手機(jī)相冊(cè)中選圖接口用法。分享給大家供大家參考,具體如下:
目前中js-sdk 1.0版本中,預(yù)覽圖片提供了2個(gè)接口,接口的定義參考官方文檔
1.預(yù)覽網(wǎng)絡(luò)圖片http鏈接的
2.預(yù)覽本地圖片wenxin:// 鏈接的
一、預(yù)覽圖片接口
注:
1.預(yù)覽圖片接口目前只支持微信手機(jī)版
2.預(yù)覽圖片只支持http連接,對(duì)于weixin:// 無(wú)法預(yù)覽
3.預(yù)覽圖片的地址需要進(jìn)行加密處理,尤其路徑中有中文的情況下,需要使用window.encodeURI()方法
實(shí)例說(shuō)明:
//1.預(yù)覽圖片 會(huì)顯示下載失敗 wx.previewImage({ current:'http://localhost/content/images/冰皮月餅.jpg', urls:[ 'http://localhost/content/images/冰皮月餅.jpg' ] }); //預(yù)覽圖片成功 wx.previewImage({ current:'http://localhost/content/images/%E5%86%B0%E7%9A%AE%E6%9C%88%E9%A5%BC.jpg', urls:[ 'http://localhost/content/images/%E5%86%B0%E7%9A%AE%E6%9C%88%E9%A5%BC.jpg' ] });
自定義預(yù)覽網(wǎng)頁(yè)中,指定的圖片實(shí)例:
var imgList=$('.row img'); var urlList=[]; imgList.each(function(){ var url='http://'+location.host+$(this).attr('src'); //對(duì)url中的中文進(jìn)行處理 url=window.encodeURI(url); urlList.push(url); }); //1.預(yù)覽圖片接口目前只支持微信手機(jī)版 //2.預(yù)覽圖片只支持http連接,對(duì)于weixin:// 無(wú)法預(yù)覽 wx.previewImage({ current:urlList[0], urls:urlList });
二、從拍照或手機(jī)相冊(cè)中選擇圖片,預(yù)覽本地圖片
1.返回選定照片的本地ID列表,localId可以作為img標(biāo)簽的src屬性顯示圖片,鏈接地址都是 weixin://resourceid/xxxx
2. localId 可以用于微信手機(jī)版圖片顯示(目前PC版不可用)
實(shí)例1:
//2.選擇圖片單個(gè)圖片 wx.chooseImage({ count: 1, // 默認(rèn)9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有 sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī),默認(rèn)二者都有 success: function (res) { var localIds = res.localIds; // 返回選定照片的本地ID列表,localId可以作為img標(biāo)簽的src屬性顯示圖片 // localId 可以用于微信手機(jī)版圖片顯示(目前PC版不可用) $('#imgTarget').attr('src',localIds[0]); } });
實(shí)例2:
//選擇多個(gè)圖片 wx.chooseImage({ count:4, sizeType:['original'], sourceType:['album', 'camera'], success:function(res){ var localIds=res.localIds; for (var i = 0; i < localIds.length; i++) { var localId=localIds[i]; addImg(localId); } } }); //添加圖片的row function addImg(src){ var col=$('<div />'); col.addClass('col-xs-6 col-md-3'); var a=$('<a />'); a.addClass('thumbnail'); var img=$('<img />'); img.attr('src',src); a.append(img).append(src); col.append(a); $('.row').append(col); }
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- 微信小程序開(kāi)發(fā)之從相冊(cè)獲取圖片 使用相機(jī)拍照 本地圖片上傳
- 微信小程序開(kāi)發(fā)之相冊(cè)選擇和拍照詳解及實(shí)例代碼
- PHP實(shí)現(xiàn)微信JS-SDK接口選擇相冊(cè)及拍照并上傳的方法
- 微信小程序 獲取相冊(cè)照片實(shí)例詳解
- 微信小程序?qū)崿F(xiàn)圖片上傳、刪除和預(yù)覽功能的方法
- 微信小程序多張圖片上傳功能
- 微信小程序開(kāi)發(fā)(二)圖片上傳+服務(wù)端接收詳解
- 微信小程序教程之本地圖片上傳(leancloud)實(shí)例詳解
- 移動(dòng)端html5圖片上傳方法【更好的兼容安卓IOS和微信】
- 微信端調(diào)取相冊(cè)和攝像頭功能,實(shí)現(xiàn)圖片上傳,并上傳到服務(wù)器
相關(guān)文章
關(guān)閉頁(yè)面時(shí)window.location事件未執(zhí)行的原因分析及解決方案
最近在做一個(gè)項(xiàng)目的時(shí)候,遇到個(gè)問(wèn)題,就是關(guān)閉頁(yè)面時(shí)window.location事件未執(zhí)行,百思不得其解,度娘上搜了一下才知道具體原因,記錄一下2014-09-09基于JS實(shí)現(xiàn)textarea中獲取動(dòng)態(tài)剩余字?jǐn)?shù)的方法
這篇文章主要介紹了基于JS實(shí)現(xiàn)textarea中獲取動(dòng)態(tài)剩余字?jǐn)?shù)的方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-05-05C#程序員入門(mén)學(xué)習(xí)微信小程序的筆記
這篇文章主要給大家分享了一位C#程序員入門(mén)學(xué)習(xí)微信小程序的筆記,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03淺談jQuery異步對(duì)象(XMLHttpRequest)
文章淺顯易懂的將jQuery異步對(duì)象分為了5個(gè)步奏,非常有利于我們學(xué)習(xí)記憶,是篇相當(dāng)不錯(cuò)的學(xué)習(xí)jQuery異步對(duì)象的文章,這里推薦給大家。2014-11-11uni-app常用的幾種頁(yè)面跳轉(zhuǎn)方式總結(jié)
uni-app的頁(yè)面跳轉(zhuǎn)和小程序和vue很相似,只是方法和標(biāo)簽有所不同,這篇文章主要給大家介紹了關(guān)于uni-app常用的幾種頁(yè)面跳轉(zhuǎn)方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08JS對(duì)話框_JS模態(tài)對(duì)話框showModalDialog用法總結(jié)
本篇文章主要是對(duì)JS對(duì)話框_JS模態(tài)對(duì)話框showModalDialog的用法進(jìn)行了總結(jié)介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01