微信开发之调起摄像头、本地展示图片、上传下载图片实例


Posted in Javascript onDecember 08, 2016

之前那篇微信JS-SDK授权的文章实现了分享接口,那么这里总结一下如何在微信里面通过js调起原生摄像头,以及上传下载图片。

1.配置

页面引入通过jssdk授权后,传入wx对象,首先配置需要的接口

wx.config({
  /* debug: true, */
  appId: appid, 
  timestamp: timestamp, 
  nonceStr: nonceStr, 
  signature: signature,
  jsApiList: [
     'chooseImage',//拍照或从手机相册中选图接口
     'previewImage',//预览图片接口
     'uploadImage',//上传图片接口
     'downloadImage'//下载图片接口
 ]
 });

2.调起拍照/相册

将下面的方法放在需要点击事件的回调函数里面

wx.chooseImage({
  count: 1, //张数, 默认9
  sizeType: ['compressed'], //建议压缩图
  sourceType: ['album', 'camera'], // 来源是相册、相机
  success: function (res) {

//var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
    $('.driver-card img').prop('src',res.localIds[0]);
    uploadPhoto.uploadToWeixinServer(res.localIds[0],'car')
  }
});

这时我们可以看到这样的效果,代表调起成功了!chooseImage方法的成功回调里,我将选中的照片赋值给需要显示的img的src(因为我这里只有一张照片,如果有多张用循环赋值即可),这样一来,就可以直接显示刚刚拍照/相册里选中的照片了

微信开发之调起摄像头、本地展示图片、上传下载图片实例 

3.上传照片

在上面chooseImage的success回调里面,可以看到我调用了uploadToWeixinServer方法,参数为本地照片的Id

uploadToWeixinServer: function(localId,type){
      wx.uploadImage({
        localId: localId,
        isShowProgressTips: 1, // 默认为1,显示进度提示
        success: function (res) {




  //res.serverId 返回图片的微信服务器端ID
          uploadPhoto.uploadToOwnerServer(res.serverId,type);//异步上传到我们自己的服务器
        }
      });
    },

调用uploadImage接口后,将图片上传到了微信服务器,返回图片的ID,这个时候需要用ajax异步上传到自己的服务器里,调用微信提供的“获取临时素材”接口。当然也不一定是选择完照片就立即上传,还得根据实际业务需求出发,也有是静默上传(没有进度提示),也有是在最终提交表单时一起上传

js:

uploadToOwnerServer: function(serverId,type){
      $.ajax({
        data: {serverId:serverId,type:type},
        type : "POST",
        url : WX_ROOT + "wechat/uploadPhoto",
        success : function(json) {
          if (json) {
            var data = JSON.parse(json.data);
            if ('car' == type) 
              uploadPhoto.options.carImage = data.path + data.name
            else
              uploadPhoto.options.idCardImage = data.path + data.name
            
          }
        }
      });
    },

Controller

@RequestMapping(value = "/uploadPhoto", method = RequestMethod.POST)
  public @ResponseBody HttpResult uploadPhoto(@RequestParam String serverId,@RequestParam String type) throws Exception{
    LOGGER.info("RestFul of uploadPhoto parameters serverId:{},type:{}",serverId,type);
    
    try {
      /** 将图片保存到本地服务器 **/
      String photoName = type + new Date().getTime() + UUID.randomUUID().toString();
      
      //文件路径不存在则创建
      File saveFile = new File(PIC_PATH + type);
      if (!saveFile.mkdir()) saveFile.mkdir();
      
      wechatService.saveImageToDisk(serverId, photoName, PIC_PATH + type + "/");
      LOGGER.info("Download the picture from weixin server pathL:{}",PIC_PATH + type + "/");
      JSONObject data = new JSONObject();
      data.put("name", type + "/" + photoName+".jpg");
      data.put("path", PIC_SERVER + "/");
      
      HttpResult rs = new HttpResult();
      rs.setCode(200);
      rs.setData(data.toJSONString());
      LOGGER.info("Download the picture from weixin server is successful!serverId:{},photoName:{}",serverId,photoName);
      LOGGER.info("HttpResult data:{}",rs.getData());
      return rs;
    } catch (Exception e) {
      LOGGER.error("Download the picture from weixin server is error",serverId);
      return null;
    }

这里我使用了一个UUID生成主键规则,通过类型+时间戳+唯一字符串定义图片名称。如果上传成功,同时又将自己服务器的图片地址返回给前端。

getInputStream

调用微信提供的获取临时素材接口下载还在微信服务器上的图片,参数为前端提交上来的媒体文件ID,最终将文件转化为输入流对象

/**
   * 根据文件id下载文件 
   * @param accessToken
   * @param mediaId 
   * @return 文件流对象
   */
  public InputStream getInputStream(String accessToken, String mediaId) { 
    InputStream is = null; 
    String url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token="+ accessToken + "&media_id=" + mediaId; 
    try { 
      URL urlGet = new URL(url); 
      HttpURLConnection http = (HttpURLConnection) urlGet.openConnection(); 
      http.setRequestMethod("GET"); // 必须是get方式请求 
      http.setRequestProperty("Content-Type","application/x-www-form-urlencoded"); 
      http.setDoOutput(true); 
      http.setDoInput(true); 
      System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 连接超时30秒 
      System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 读取超时30秒 
      http.connect(); 
      // 获取文件转化为byte流 
      is = http.getInputStream(); 
    } catch (Exception e) { 
      LOGGER.error("Failed to convert inputStream from weixin server,accessToken:{},mediaId:{}",accessToken,mediaId);
    } 
    return is; 
 
  }

service

通过循环解析流对象,将文件写入自己的服务器

public void saveImageToDisk(String mediaId, String picName, String picPath) throws Exception { 
    String accessToken = getBaseAccessToken();
    InputStream inputStream = getInputStream(accessToken, mediaId); 
    
    // 循环取出流中的数据
    byte[] data = new byte[1024]; 
    int len = 0; 
    FileOutputStream fileOutputStream = null; 
    try { 
      fileOutputStream = new FileOutputStream(picPath+picName+".jpg"); 
      while ((len = inputStream.read(data)) != -1) { 
        fileOutputStream.write(data, 0, len); 
      } 
      LOGGER.info("Write the fileInputStream is successful");
    } catch (IOException e) { 
      LOGGER.error("Write the fileInputStream is error");
    } finally { 
      if (inputStream != null) { 
        try { 
          inputStream.close(); 
        } catch (IOException e) { 
          LOGGER.error("Close the fileInputStream is error");
        } 
      } 
      if (fileOutputStream != null) { 
        try { 
          fileOutputStream.close(); 
        } catch (IOException e) { 
          LOGGER.error("Close the fileOutputStream is error");
        } 
      } 
    } 
  }

 4.总结

那么到这里,简单的拍照,展示图片,上传下载的功能都已经完成,其实代码就是最好的注释!微信开放的jssdk提供了很多友好而有趣的功能,接下来还需要继续实践研究....

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 跨域访问问题解决方法
Dec 02 Javascript
js中设置元素class的三种方法小结
Aug 28 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
Javascript玩转继承(二)
May 08 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 #Javascript
浅谈JavaScript的闭包函数
Dec 08 #Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 #Javascript
Vue.JS入门教程之自定义指令
Dec 08 #Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 #Javascript
node.js学习之交互式解释器REPL详解
Dec 08 #Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 #Javascript
You might like
ajax实现无刷新分页(php)
2010/07/18 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
python 实现矩阵填充0的例子
2019/11/29 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
介绍下WebSphere的安全性
2013/01/31 面试题
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
校运会新闻稿
2015/07/17 职场文书
vue自定义右键菜单之全局实现
2022/04/09 Vue.js