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


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 相关文章推荐
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
vue+canvas实现拼图小游戏
Sep 18 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 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
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
使用PDB简单调试Python程序简明指南
2015/04/25 Python
深入解析Python中的上下文管理器
2016/06/28 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
python flask实现分页效果
2017/06/27 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
python实现机器人行走效果
2018/01/29 Python
代码分析Python地图坐标转换
2018/02/08 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
Python魔法方法功能与用法简介
2019/04/04 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
环境工程专业自荐信
2014/03/03 职场文书
画展邀请函
2015/01/31 职场文书
人事主管岗位职责
2015/02/04 职场文书
五一劳动节活动总结
2015/02/09 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
2015年测量员工作总结
2015/05/23 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书