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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信开发之调起摄像头、本地展示图片、上传下载图片实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5587字，纯文字阅读大概需要8分钟。

内容图文

之前那篇微信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提供了很多友好而有趣的功能，接下来还需要继续实践研究....

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的微信开发之调起摄像头、本地展示图片、上传下载图片实例全部内容，希望文章能够帮你解决微信开发之调起摄像头、本地展示图片、上传下载图片实例所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/347980.html

来源：【匿名】

【上一篇】详解微信小程序页面跳转传递参数【下一篇】javascript 怎么调用php方法

更多 ►

【微信开发之调起摄像头、本地展示图片、上传下载图片实例】教程文章相关的互联网学习教程文章

javascript调用摄像头【代码】

javascript – 如何使用react js组件在网页上流式传输网络摄像头？【代码】

我是reactJS的新手,并试图构建一个组件. 我想构建一个基本实用程序,其中我有一个显示实时网络摄像头源的视频组件,并且会有一个捕获按钮,用于捕获并存储源到磁盘的快照.我希望它在一个组件中(视频输入捕获按钮) 这段代码在浏览器中流式传输,但我希望它在一个组件中,<body> <div id="container"><video autoplay="true" id="videoElement"></video> </div> <script>var video = document.querySelector("#videoElement");navigator.g...

javascript-node-webkit应用中视频通信的摄像头调用被360阻止

我用node-webkit封了一个简单的应用（main直接指向我的一个网站），当中webrtc的视频通信，可是经常被360等流氓阻止摄像头的调用。可有办法破之？回复内容：我用node-webkit封了一个简单的应用（main直接指向我的一个网站），当中webrtc的视频通信，可是经常被360等流氓阻止摄像头的调用。可有办法破之？360是驱动层面的阻拦摄像头的，要破解有点难。要不然当应用检测到摄像功能不能正常使用的时候，提示用户暂时退出安全软件，给...

js如何调用摄像头？js调用摄像头的方法（代码详解）【图】

本篇文章给大家带来的内容是介绍js如何调用摄像头？js调用摄像头的方法（代码详解）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。详情源码请参见：https://github.com/ProsperLe<div><b>调用移动端摄像头</b><br><label>照相机： <input type="file" id=image accept="image/*" capture=camera></label><label>摄像机： <input type="file" id=video accept="video/*" capture=camcorder></label></div><hr...

如何使用Vue2.0调用摄像头进行拍照

这次给大家带来如何使用Vue2.0调用摄像头进行拍照，使用Vue2.0调用摄像头进行拍照的注意事项有哪些，下面就是实战案例，一起来看一下。<template><p><p style="padding:20px;"><p class="show"><p class="picture" :style="backgroundImage:url(+headerImage+)"></p></p><p style="margin-top:20px;"><input type="file" id="upload" accept="image/jpg" @change="upload"><label for="upload"></label></p></p></p> </template> <...

怎样使用JS实现调用本地摄像头

这次给大家带来怎样使用JS实现调用本地摄像头，使用JS实现调用本地摄像头的注意事项有哪些，下面就是实战案例，一起来看一下。今天学习了一下js调用本地摄像头，其实是实现不是很麻烦，下面是代码部分，连接上Tomcat服务器，然后再到网页上打开即可以看到效果了。。快来玩一下吧！<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <style> video {border: 1px solid #ccc;display: block;margin...

vue2.0调用摄像头步骤详解

这次给大家带来vue2.0调用摄像头步骤详解，使用vue2.0调用摄像头的注意事项有哪些，下面就是实战案例，一起来看一下。可以在github 上下载demo链接vue组件代码<template><p><p style="padding:20px;"><p class="show"><p class="picture" :style="backgroundImage:url(+headerImage+)"></p></p><p style="margin-top:20px;"><input type="file" id="upload" accept="image/jpg" @change="upload"><label for="upload"></label></p>...

js实现web调用摄像头 js截取视频画面

本文实例为大家分享了JS实现截取视频画面的具体代码，供大家参考，具体内容如下 Html <p><button onclick="openMedia()">打开</button><button onclick="closeMedia()">关闭</button><button onclick="drawMedia()">截取</button> </p> <video id="video" class="bg"></video> <canvas id="qr-canvas"></canvas>Javascript <script type="text/javascript">var video = document.querySelector(video);var text = document.getElem...

JS调用安卓手机摄像头扫描二维码

项目要求：使用H5模仿微信扫一扫付款功能经过一系列的查找最后发现可以使用 JS调用手机摄像头然后用画布把当前摄像头的数据转成Base64的png图片，经过QrCode直接再本地识别。优点：兼容大多数浏览器本地识别不占用服务端资源代码比较简单只有一个页面 <html lang="ZH-CN"> <head><meta charset="utf-8"><title>Web QrCode Test</title> <script type="text/javascript" src="jquery-1.8.3.min.js"></script><script type="te...

Vue 莹石摄像头直播视频实例代码

Vue 莹石摄像头直播视频代码。 HTML代码： <div class="mainClass" v-show="rtmp_url!="><video id="myPlayer" controls playsinline webkit-playsinline autoplay><source type="application/x-mpegURL" :src="http_url"/><source :src="rtmp_url"/></video> </div>直播地址是调用接口获取的。 <script> export default {data(){return{player:"",rtmp_url:"",http_url:"",message:加载中...,}},mounted(){ this.GetLiveUrl();...

微信小程序调用摄像头隐藏式拍照功能

微信小程序最近非常火热，小编最近做了一个新项目，使用小程序开发考试系统，在使用App参加考试的时候调用摄像头抓拍用户是否作弊，在开发过程中遇到点问题，下面小编把问题描述和解决方法分享给大家，具体内容如下：问题今天小编遇到了这么个问题，就是在用户使用App参加考试的时候调用摄像头抓拍用户是否作弊，其实这也没什么，关键在于不能打扰用户考试，不能被用户发现什么时候抓拍的，也不能给用户查看图片，只有考完是后才...

js调用设备摄像头的方法

本文实例为大家分享了js调用设备摄像头的具体代码，供大家参考，具体内容如下使用getUserMedia这个API来获取摄像头的权限兼容chrome和火狐，IOS不兼容下面是源码：<!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title></head><body><video src=""></vid...

Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能

本文实例为大家分享了Vue2.0实现调用摄像头进行拍照功能的具体代码，以及图片上传功能引用exif.js，供大家参考，具体内容如下可以在github 上下载demo链接 vue组件代码 <template><div><div style="padding:20px;"><div class="show"><div class="picture" :style="backgroundImage:url(+headerImage+)"></div></div><div style="margin-top:20px;"><input type="file" id="upload" accept="image/jpg" @change="upload"><label f...

JS打开摄像头并截图上传示例【图】

直入正题，JS打开摄像头并截图上传至后端的一个完整步骤1. 打开摄像头主要用到getUserMedia方法，然后将获取到的媒体流置入video标签2. 截取图片主要用到canvas绘图，使用drawImage方法将video的内容绘至canvas中3. 将截取的内容上传至服务器，将canvas中的内容转为base64格式上传，后端（PHP）通过file_put_contents将其转为图片要注意的是，在chrome以外的浏览器中，使用摄像头或多或少会出现一些问题，可能也是老问题了，所以以...