微信js-sdk上传与下载图片接口用法示例


Posted in Javascript onOctober 12, 2016

本文实例讲述了微信js-sdk上传与下载图片接口用法。分享给大家供大家参考,具体如下:

前提已经在wx.config()中,将图片接口验证通过。

微信js-sdk 中上传图片接口(uploadImage)和下载图片接口(downloadImage)都是针对微信服务器本身的。以官方文档为准

注:

1.使用chooseImage接口获取到微信客户端图片地址的与都是 weixin://xxxx

2.上传图片有效期3天,可用微信多媒体接口下载图片到自己的服务器,此处获得的 serverId 即 media_id,参考文档 http://mp.weixin.qq.com/wiki/12/58bfcfabbd501c7cd77c19bd9cfa8354.html

3.目前多媒体文件下载接口的频率限制为10000次/天,如需要调高频率,请邮件weixin-open@qq.com,邮件主题为【申请多媒体接口调用量】,请对你的项目进行简单描述,附上产品体验链接,并对用户量和使用量进行说明。

实例1、选择单个图片并上传到微信服务器

//选择图片单个图片
wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original'],
  sourceType: ['album', 'camera'],
  success: function (res) {
    var localId= res.localIds[0];
    $('#localId').text(localId);
    //选择图片成功,上传到微信服务器
    wx.uploadImage({
      localId: localId, // 需要上传的图片的本地ID,由chooseImage接口获得
      isShowProgressTips: 1, // 默认为1,显示进度提示
      success: function (res) {
        var serverId = res.serverId; // 返回图片的服务器端ID
        $('#serverId').text(serverId);
      }
    });
  }
});

实例2、下载,刚上传的图片,指定serverID

var serverId=$('#serverId').text();
wx.downloadImage({
  serverId: serverId, // 需要下载的图片的服务器端ID,由uploadImage接口获得
  isShowProgressTips: 1, // 默认为1,显示进度提示
  success: function (res) {
    var localId = res.localId; // 返回图片下载后的本地ID
    $('#imgTarget').attr('src',localId);
  }
});

从微信客户端获取用户文件,方法2,
可以使用html的File文件域,读取客户端文件,然后上传到服务器

<div class="container">
  <!--图片类型验证方法1-->
  <input type="file" id="file" multiple accept="image/*" />
  <input type="button" id="btn1" value="选择上传文件" onclick="showFiles();" />
  <h4>选择文件如下:</h4>
  <img src="" id="img1" />
</div>

Js代码:

//读取图片,并上传到服务器实例
var fileBox = document.getElementById('file');
function showFiles() {
  //获取选择文件的数组
  var fileList = fileBox.files;
  for (var i = 0; i < fileList.length; i++) {
    var file = fileList[i];
    //图片类型验证第二种方式
    if (/image\/\w+/.test(file.type))
      readFile(file);
    else
      console.log(file.name + ':不是图片');
  }
}
//读取图片内容 为DataURL
function readFile(file) {
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function (e) {
    var result = reader.result;
    $('#img1').attr('src', result)
    upload(result);
  }
  //上传到自己的服务器
  function upload(dataUrl){
    var data=dataUrl.split(',')[1];
    //数据结果是转换,转换成二进制数据
    data=window.atob(data);
    var uint=new Uint8Array(data.length)
    for (var i = 0; i < data.length; i++) {
      uint[i]=data.charCodeAt(i);
    }
    var blob=new Blob([uint],{type:'image/jpeg'});
    //上传到服务器
    var fd=new FormData();
    fd.append('file',blob);
    fd.append('isclip', '-1');
    fd.append('maxsize', 1024*1024*10);
    fd.append('minsize', 0);
    fd.append('subfolder', '1');
    fd.append('automove',true);
    fd.append('extention', '.jpg');
    alert('开始上传');
    var xhr = new XMLHttpRequest();
    xhr.open('post', '/common/upload', true);
    //监听事件
    xhr.onreadystatechange = function (e) {
      if (xhr.readyState == 4 && xhr.status == 200) {
        var data = eval('(' + xhr.responseText + ')');
        if (data.success == true) {
          alert('上传成功:');
          alert(data.msg);
        } else {
          alert(data.msg);
        }
      } else {
        //alert(xhr.readyState);
      }
    }
    xhr.send(fd);
  }
}

读取客户端图片,方法3,目前无效,代码仅供参考

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original'],
  sourceType: ['album', 'camera'],
  success: function (res) {
    var localId= res.localIds[0];
    //获取图片对象
    try {
      var img=new Image();
      //此设置在微信浏览器中无效,也不会抛出异常,后面的代码不会执行
      img.setAttribute('crossOrigin', 'anonymous');
      img.onload=function(){
        var canvas=document.getElementById('canvasOne');
        var ctx=canvas.getContext('2d');
        canvas.width=img.width;
        canvas.height=img.height;
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(img,0,0,img.width,img.height);
        try {
          upload(canvas);
        } catch (e) {
          alert(e.name);
          alert(e.message);
        }
      }
      img.src=localId;
    } catch (e) {
      alert(e.name);
      alert(e.message);
    }
  }
});
//上传到自己的服务器
function upload(canvas){
  //由于toDataURL()的浏览器安全问题,如果不是同一个域的图片会抛出异常
  //所以此处
  var data=canvas.toDataURL('image/jpeg');
  data=data.split(',')[1];
  alert(data.length);
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript 中的类和闭包
Jan 08 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 #Javascript
webpack+vue.js快速入门教程
Oct 12 #Javascript
jquery 抽奖小程序实现代码
Oct 12 #Javascript
微信js-sdk地理位置接口用法示例
Oct 12 #Javascript
vue.js表格组件开发的实例详解
Oct 12 #Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 #Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 #Javascript
You might like
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
javascript新手语法小结
2008/06/15 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
javascript操作css属性
2013/12/30 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
js转html实体的方法
2016/09/27 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
python中二维阵列的变换实例
2014/10/09 Python
python如何在终端里面显示一张图片
2016/08/17 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
python函数不定长参数使用方法解析
2019/12/14 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
财务方面个人工作的自我评价
2013/12/28 职场文书
四年级语文教学反思
2014/02/05 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
干部作风建设工作总结
2014/10/29 职场文书
自我检讨书怎么写
2015/05/07 职场文书
安全生产协议书
2016/03/22 职场文书
pytorch实现手写数字图片识别
2021/05/20 Python
MySQL创建表操作命令分享
2022/03/25 MySQL
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python