微信js-sdk預(yù)覽圖片接口及從拍照或手機相冊中選圖接口用法示例
本文實例講述了微信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ù)覽圖片的地址需要進(jìn)行加密處理,尤其路徑中有中文的情況下,需要使用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中的中文進(jìn)行處理
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標(biāo)簽的src屬性顯示圖片,鏈接地址都是 weixin://resourceid/xxxx
2. localId 可以用于微信手機版圖片顯示(目前PC版不可用)
實例1:
//2.選擇圖片單個圖片
wx.chooseImage({
count: 1, // 默認(rèn)9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認(rèn)二者都有
success: function (res) {
var localIds = res.localIds;
// 返回選定照片的本地ID列表,localId可以作為img標(biāo)簽的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);
}
}
});
//添加圖片的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動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
關(guān)閉頁面時window.location事件未執(zhí)行的原因分析及解決方案
最近在做一個項目的時候,遇到個問題,就是關(guān)閉頁面時window.location事件未執(zhí)行,百思不得其解,度娘上搜了一下才知道具體原因,記錄一下2014-09-09
基于JS實現(xiàn)textarea中獲取動態(tài)剩余字?jǐn)?shù)的方法
這篇文章主要介紹了基于JS實現(xiàn)textarea中獲取動態(tài)剩余字?jǐn)?shù)的方法的相關(guān)資料,非常不錯,具有參考借鑒價值,感興趣的朋友一起看看吧2016-05-05
uni-app常用的幾種頁面跳轉(zhuǎn)方式總結(jié)
uni-app的頁面跳轉(zhuǎn)和小程序和vue很相似,只是方法和標(biāo)簽有所不同,這篇文章主要給大家介紹了關(guān)于uni-app常用的幾種頁面跳轉(zhuǎn)方式,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
JS對話框_JS模態(tài)對話框showModalDialog用法總結(jié)
本篇文章主要是對JS對話框_JS模態(tài)對話框showModalDialog的用法進(jìn)行了總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01

