本文實例講述了微信js-sdk預(yù)覽圖片接口及從拍照或手機相冊中選圖接口用法。分享給大家供大家參考，具體如下：
目前中js-sdk 1.0版本中，預(yù)覽圖片提供了2個接口，接口的定義參考官方文檔
1.預(yù)覽網(wǎng)絡(luò)圖片http鏈接的
2.預(yù)覽本地圖片wenxin:// 鏈接的
一、預(yù)覽圖片接口
注：
1.預(yù)覽圖片接口目前只支持微信手機版
2.預(yù)覽圖片只支持http連接，對于weixin:// 無法預(yù)覽
3.預(yù)覽圖片的地址需要進行加密處理，尤其路徑中有中文的情況下，需要使用window.encodeURI（）方法
實例說明：
//1.預(yù)覽圖片 會顯示下載失敗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)頁中，指定的圖片實例：
var imgList=$('.row img');var urlList=[];imgList.each(function(){ var url='http://'+location.host+$(this).attr('src'); //對url中的中文進行處理 url=window.encodeURI(url); urlList.push(url);});//1.預(yù)覽圖片接口目前只支持微信手機版//2.預(yù)覽圖片只支持http連接，對于weixin:// 無法預(yù)覽wx.previewImage({ current:urlList[0], urls:urlList});二、從拍照或手機相冊中選擇圖片，預(yù)覽本地圖片
1.返回選定照片的本地ID列表，localId可以作為img標簽的src屬性顯示圖片，鏈接地址都是 weixin://resourceid/xxxx
2. localId 可以用于微信手機版圖片顯示（目前PC版不可用）
實例1：
//2.選擇圖片單個圖片wx.chooseImage({ count: 1, // 默認9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有 success: function (res) { var localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標簽的src屬性顯示圖片 // localId 可以用于微信手機版圖片顯示（目前PC版不可用） $('#imgTarget').attr('src',localIds[0]); }});實例2：
//選擇多個圖片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); } }});//添加圖片的rowfunction 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動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
新聞熱點
疑難解答
