登录 ×

梨花寨前端技术交流平台!

html,css,js,html5,css3等

基于微信API实现拍照上传示例分享

2018-06-07 11:25:20 | 浏览量:122 h5 微信

H5页面有轻便,灵活的优势,且可以借助于微信平台做低成本推广,得到的广泛的应用。不过纯页面在功能上受限,好在可以借助微信提供的APi实现更多功能,必然调用手机硬件功能,本文讲解下最常用的,H5页面调用微信API实现拍摄照片并上传的功能。

1、引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js

2、前端页面对微信API初始化配置

需要获取微信js-sdk参数,具体获取方法参考另一篇文章 微信JS-SDK数字签名生成方法(NodeJS版本)

wx.config({ 
   debug: false, // 开启调试模式
   appId: "$!{wxsign.get('appId')}", // 必填,公众号的唯一标识 
   timestamp: "$!{wxsign.get('timeStamp')}", // 必填,生成签名的时间戳 
   nonceStr: "$!{wxsign.get('nonceStr')}", // 必填,生成签名的随机串 
   signature: "$!{wxsign.get('signature')}",// 必填,签名,见附录1 
   jsApiList: ['checkJsApi', 
         'chooseImage', 
         'previewImage', 
         'uploadImage'] // 必填,需要使用的JS接口列表
 }); 
  
 var images = { 
  localId: [], 
  serverId: [] 
 };

3、拍照或从手机相册中选图接口

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  success: function (res) {
    var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
  }
});
4、上传图片接口

注意,这里的上传是将图片上传到微信的服务器,有几天的缓存期,在这期间可以凭serverId获取。

wx.uploadImage({
  localId: '', // 需要上传的图片的本地ID,由chooseImage接口获得
  isShowProgressTips: 1, // 默认为1,显示进度提示
  success: function (res) {
    var serverId = res.serverId; // 返回图片的服务器端ID
  }
});

5、下载图片到自己的服务器

微信返回的serverid我们需要通过微信api获取真实的图片二进制数据。

需求及问题提交:

点击图片更换数字

0.6576s