欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信js-sdk預(yù)覽圖片接口及從拍照或手機(jī)相冊(cè)中選圖接口用法示例

 更新時(shí)間:2016年10月13日 08:51:17   作者:天馬3798  
這篇文章主要介紹了微信js-sdk預(yù)覽圖片接口及從拍照或手機(jī)相冊(cè)中選圖接口用法,較為詳細(xì)的分析了預(yù)覽圖片接口及與拍照或手機(jī)相冊(cè)中選圖接口的功能、調(diào)用方法與相關(guān)使用技巧,需要的朋友可以參考下

本文實(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ì)有所幫助。

相關(guān)文章

  • 關(guān)閉頁(yè)面時(shí)window.location事件未執(zhí)行的原因分析及解決方案

    關(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ù)的方法

    這篇文章主要介紹了基于JS實(shí)現(xiàn)textarea中獲取動(dòng)態(tài)剩余字?jǐn)?shù)的方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧
    2016-05-05
  • js 多層疊的TAB選項(xiàng)卡

    js 多層疊的TAB選項(xiàng)卡

    一個(gè)多層疊的TAB選項(xiàng)卡,自適應(yīng)寬度(自行更改nonstop的width測(cè)試效果)。
    2010-01-01
  • 圖片上傳插件jquery.uploadify詳解

    圖片上傳插件jquery.uploadify詳解

    如果頁(yè)面沒(méi)有顯示“BROWSE”按鈕,則說(shuō)明你的'uploader' : '<%=basePath%>images/uploadify.swf'配置不對(duì),檢查下路徑是否正確
    2013-11-11
  • C#程序員入門(mén)學(xué)習(xí)微信小程序的筆記

    C#程序員入門(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ì)象(XMLHttpRequest)

    文章淺顯易懂的將jQuery異步對(duì)象分為了5個(gè)步奏,非常有利于我們學(xué)習(xí)記憶,是篇相當(dāng)不錯(cuò)的學(xué)習(xí)jQuery異步對(duì)象的文章,這里推薦給大家。
    2014-11-11
  • 詳解JavaScript函數(shù)對(duì)象

    詳解JavaScript函數(shù)對(duì)象

    函數(shù)是由事件驅(qū)動(dòng)的或者當(dāng)它被調(diào)用時(shí)執(zhí)行的可重復(fù)使用的代碼塊,JavaScript 中的所有事物都是對(duì)象:字符串、數(shù)值、數(shù)組、函數(shù),下面通過(guò)本文給大家介紹JavaScript函數(shù)對(duì)象,感興趣的朋友一起學(xué)習(xí)吧
    2015-11-11
  • uni-app常用的幾種頁(yè)面跳轉(zhuǎn)方式總結(jié)

    uni-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-08
  • 原生JS實(shí)現(xiàn)N級(jí)菜單的代碼

    原生JS實(shí)現(xiàn)N級(jí)菜單的代碼

    最近有項(xiàng)目要實(shí)現(xiàn)N級(jí)菜單,首先從布局入手,即判斷是否有下級(jí)菜單,具體實(shí)現(xiàn)代碼,大家可以參考下本文
    2017-05-05
  • JS對(duì)話框_JS模態(tài)對(duì)話框showModalDialog用法總結(jié)

    JS對(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

最新評(píng)論