微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例


Posted in Javascript onOctober 13, 2016

本文实例讲述了微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法。分享给大家供大家参考,具体如下:

目前中js-sdk 1.0版本中,预览图片提供了2个接口,接口的定义参考官方文档

1.预览网络图片http链接的

2.预览本地图片wenxin:// 链接的

一、预览图片接口

注:

1.预览图片接口目前只支持微信手机版
2.预览图片只支持http连接,对于weixin:// 无法预览
3.预览图片的地址需要进行加密处理,尤其路径中有中文的情况下,需要使用window.encodeURI()方法

实例说明:

//1.预览图片 会显示下载失败
wx.previewImage({
  current:'http://localhost/content/images/冰皮月饼.jpg',
  urls:[
    'http://localhost/content/images/冰皮月饼.jpg'
  ]
});
//预览图片成功
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'
  ]
});

自定义预览网页中,指定的图片实例:

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.预览图片接口目前只支持微信手机版
//2.预览图片只支持http连接,对于weixin:// 无法预览
wx.previewImage({
  current:urlList[0],
  urls:urlList
});

二、从拍照或手机相册中选择图片,预览本地图片

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);
    }
  }
});
//添加图片的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);
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
List Installed Hot Fixes
Jun 12 Javascript
JavaScript 事件参考手册
Dec 24 Javascript
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
WebPack基础知识详解
Jan 16 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
动态规划之使用备忘录来改进Javascript函数
Apr 07 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 #Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 #Javascript
jquery  实现轮播图详解及实例代码
Oct 12 #Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 #Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 #Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 #Javascript
微信js-sdk界面操作接口用法示例
Oct 12 #Javascript
You might like
PHP入门速成教程
2007/03/19 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
js文字横向滚动特效
2015/11/11 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
vue实现树状表格效果
2020/12/29 Vue.js
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Python实现选择排序
2017/06/04 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
Python装饰器用法实例总结
2018/05/26 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
请说出你所知道的线程同步的方法
2013/04/19 面试题
中专毕业生自我鉴定范文
2013/11/09 职场文书
生物技术专业毕业生求职信范文
2013/12/14 职场文书
预备党员思想汇报范文
2013/12/29 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
维稳工作承诺书
2015/01/20 职场文书
入党积极分子群众意见
2015/06/01 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript