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

本文实例讲述了微信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中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

(0)

相关推荐

  • js微信应用场景之微信音乐相册案例分享

    这个demo只是一个js微信音乐相册案例大概思路,具体还需要根据情况来进行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi

  • PHP实现微信JS-SDK接口选择相册及拍照并上传的方法

    本文实例讲述了PHP实现微信JS-SDK接口选择相册及拍照并上传的方法.分享给大家供大家参考,具体如下: 理解:微信上传接口是拍照,或者选择本地照片,上传到微信的服务器,获取到一个id,通过token与这个id获取到图片,保存到服务器即可. 效果图: 通过微信js接口,调用底层程序. 需要引入js文件,并进行配置. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> wx.c

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

    本文实例讲述了微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法.分享给大家供大家参考,具体如下: 目前中js-sdk 1.0版本中,预览图片提供了2个接口,接口的定义参考官方文档 1.预览网络图片http链接的 2.预览本地图片wenxin:// 链接的 一.预览图片接口 注: 1.预览图片接口目前只支持微信手机版 2.预览图片只支持http连接,对于weixin:// 无法预览 3.预览图片的地址需要进行加密处理,尤其路径中有中文的情况下,需要使用window.encodeURI(

  • 微信小程序选择图片和放大预览图片功能

    视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片. wx.chooseImage({}) 此方法是用来选择图片的方法,具体使用如下: data: { avatarUrl:null }, 首先在数据中定义接收数据的变量,然后调用方法选择图片,将图片显示出来. bindViewTap:function(){ var that = this; wx.chooseImage({ // 设置最多可以选择的图片张数,默认9,如果我们设置了多张,那么接收时//就不在是单个变量了, c

  • 微信小程序wx.previewImage预览图片实例详解

    一.小知识 二.例子 1.wxml <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;"><view class="container"> <view wx:for="{{imgalist}}" wx:for-item="image" class="previewimg"> <im

  • 微信小程序实现预览图片功能

    本文实例为大家分享了微信小程序实现预览图片的具体代码,供大家参考,具体内容如下 先看下效果图: 这种效果在一些商城类的小程序里是很常见的一种功能,实现起来也很简单 下面我们来看一下代码: 我的这些图片资源是从后台拿到的,你们看一下具体的需求,一般都是后台返回,毕竟小程序是有大小限制的. <view class='contentbot'> <view class='contentWa' wx:key='id' wx:for='{{wawa}}'> <image src='{{i

  • JS实现上传图片的三种方法并实现预览图片功能

    在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低版本中的IE浏览器不支持). 以下是实现上述思路的方法: 1. 模板文件 <!DOCTYPE html> <html l

  • js实现上传图片之上传前预览图片

    上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出来了.功能很简单,却很实用. 预览图片的js代码: 复制代码 代码如下: <script type="text/javascript"> function setImagePreview(docObj,localImagId,imgObjPreview) { if(docObj

  • JS上传前预览图片实例

    预览图片的js代码: 复制代码 代码如下: <script type="text/javascript">        function setImagePreview(docObj,localImagId,imgObjPreview)         {            if(docObj.files && docObj.files[0])            {                //火狐下,直接设img属性            

  • js实现的在本地预览图片功能示例

    本文实例讲述了js实现的在本地预览图片功能.分享给大家供大家参考,具体如下: 移动web <body> <form enctype="multipart/form-data" name="form1"> 上传文件:<input id="f" type="file" name="f" onchange="change()" /> 预览:<img i

  • AngularJs上传前预览图片的实例代码

    在工作中,使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,之前查了一些资料,结合实践,得出一种比较实用的方法,相对简化版,在这里记录一下,如有不同看法,欢迎一起沟通,一起成长. demo.html: <!doctype html> <html ng-app="myTestCtrl"> <head> <meta charset="UTF-8"> <title>demo&l

  • 微信JS SDK接入的几点注意事项(必看篇)

    微信JS SDK接入,主要可以先参考官网说明文档,总结起来有几个步骤: 1.绑定域名: 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 备注:登录后可在"开发者中心"查看对应的接口权限. 2.引入JS文件:在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js, 备注:支持使用 AMD/CMD 标准

随机推荐