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

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

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索拍照
, 微信小程序
, 微信相册开发
微信图片上传demo
javascript经典实例、javascript项目实例、javascript实例、javascript实例教程、javascript实例精通,以便于您获取更多的相关知识。

时间: 2024-10-27 05:44:22

微信开发之调起摄像头、本地展示图片、上传下载图片实例_javascript技巧的相关文章

微信 java 实现js-sdk 图片上传下载完整流程_javascript技巧

最近做的一个项目刚好用到微信js-sdk的图片上传接口,在这里做一下总结. 在这里能知道使用js api的基本配置 https://mp.weixin.qq.com/wiki t=resource/res_main&id=mp1421141115&token=〈=zh_CN 我这里没有用checkJsApi去判断当前客户端版本是否支持指定JS接口,好.通过看开发文档,我们知道调用js接口直接都要通过config接口注入权限验证配置 <code class="hljs cs&

asp将本地的文件上传到服务器_实用技巧

今天我们讲解如何利用asp的上传功能将本地的文件上传到服务器上. 最简系统包括下面三个文件: upload.htm                         --上传口文件,选择本地文件 uploadimg.asp                  --上传程序控制文件 upload_5xsoft.inc            --无组件上传类,此文件初学者不用学习,只要会用就可以了 upload.htm内容----上传口文件,选择本地文件 <html> <head> <

.NET实现微信公共平台上传下载多媒体文件_实用技巧

举个例子,有人对着我们的公共微信号拍个照片发送过来,然后我们处理这个照片,比如进行ocr识别字(随后就会降到这个例子),或者人脸识别,或者拍照取证等,这些功能都是相当有用的.那么我们现在就要分析一下这个过程.微信平台肯定不能帮助我们OCR或者人脸识别等功能,要做这些功能首先到得到图片!用户拍摄的照片首先被上传到了wenxin的服务器,然后就有了一个mediaID,我们用这个mediaID可以下载到我们自己的服务器上然后处理,把结果给微信平台,由微信平台最终反馈给用户(关注者).微信的开发文档已经

微信公众号图片上传-微信公众号上传多媒体文件接口用JAVA怎么实现

问题描述 微信公众号上传多媒体文件接口用JAVA怎么实现 根据图片的描述是通过发送https请求上传图片.微信公众号提供的文档是通过curl命令来实现发送https post请求,但是我现在的程序是通过java程序来发送https post请求.以下是我的3个问题: 1.既然是发送https post请求上传图片,java应该也可以实现,我只实现过java https post的简单请求,没有实现过java https post图片上传.有大神能帮帮我吗? 2.既然微信公众号文档上说是通过cur

【JAVA秒会技术之图片上传】基于Nginx及FastDFS,完成图片的上传及展示

基于Nginx及FastDFS,完成商品图片的上传及展示 一.传统图片存储及展示方式      存在问题: 1)大并发量上传访问图片时,需要对web应用做负载均衡,但是会存在图片共享问题 2)web应用服务器的存储空间有限,它是web应用服务器,而不是存储服务器. 3)web应用服务器的本身的io读写性能不高,图片上传下载时,速度偏慢 4)web应用服务器访问图片时,由于图片内容较大,并发量大的时候,会占用web应用服务器的带宽,这样该web应用服务器的其他功能就会受到较大的影响.    解决方

微信公众平台开发(80) 上传下载多媒体文件

微信公众账号在回复图片.语音.视频的时候将使用media_id来调用相关文件很多朋友咨询这个如何开发实现.本文将介绍在微信公众平台开发过程中如何上传下载多媒体文件.   一.上传多媒体文件 公众号可调用本接口来上传图片.语音.视频等文件到微信服务器上传后服务器会返回对应的media_id公众号此后可根据该media_id来获取多媒体.请注意media_id是可复用的调用该接口需http协议. 通常文件上传是通过html表单进行的但通过CURL可以不经过浏览器直接在服务器端进行表单的POST提交完

PHP移动互联网开发笔记(5)——文件的上传下载

一.文件的上传 1.客户端设置: (1).在 标签中将enctype和method两个属性指明相应的值. Enctype="multipart/form-data"; Method="POST" (2).form表单中设置一个hidden类型的input框,其中name的值为MAX_FILE_SIZE的隐藏值 2.服务器端设置: (1).$_FILES多维数组:用于存储各种上传文件有关的信息 (2).文件上传与php配置文件的设置,如以下php.ini文件中的一些指

关于微信jssdk实现多图片上传的一点心得分享_javascript技巧

一.首先在common.js里封装一个函数,在需要调用jsSDK的页面引用此方法即可实现微信的信息配置 function signatureJSSDK() { var url = window.location.href.split('#')[0];//后台需要此页面的url来生成参数 $.ajax({ url:IPWeiXinJssdk,//调用后台接口,用后台返回的结果来进行微信接口的基础配置 type:"post", dataType:"json", data

96微信编辑器如何远程上传替换图片

  96微信编辑器如何远程上传替换图片: 第一.将图片上传到微信素材管理-图片素材里 进入素材管理->图片库,点击右侧的上传按钮,上传本地图片到微信素材库. 第二.进入微信素材库里,点击想要获取的图片,右键点击"复制图片地址",这样可以看到"图片地址"将该图片地址复制下来. 第三.点击进入96微信编辑器,通过粘贴图片地址方式上传图片,将图片的地址粘贴到"地址"后面的的文本框中,然后点击"确认"按钮将图片插入到编辑器.