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


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 相关文章推荐
用JavaScript编写COM组件的步骤
Mar 17 Javascript
javascript web页面刷新的方法收集
Jul 02 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
react中hook介绍以及使用教程
Dec 11 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
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
PHP生成随机密码类分享
2014/06/25 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
Python正则表达式的使用范例详解
2014/08/08 Python
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
一份报关员的职业规划范文
2014/01/08 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
大学生在校表现评语
2014/12/31 职场文书
工作收入证明范本
2015/06/12 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers