微信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 相关文章推荐
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
vue项目初始化到登录login页面的示例
Oct 31 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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实现的简单美国商品税计算函数
2015/07/13 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
简单谈谈python中的多进程
2016/11/06 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Python基于property实现类的特性操作示例
2018/06/15 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
python中sys模块是做什么用的
2020/08/16 Python
Django 实现图片上传和下载功能
2020/12/31 Python
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
党员培训思想汇报
2014/01/07 职场文书
开业庆典策划方案
2014/02/18 职场文书
入党自荐书范文
2014/03/09 职场文书
爱心捐助倡议书
2014/05/19 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
五年级作文之想象作文
2019/10/30 职场文书
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL