这里有新鲜出炉的精品教程,程序狗速度看过来!
微信(英文名:wechat)是腾讯公司于 2011 年 1 月 21 日推出的一个为智能终端提供即时通讯服务的免费应用程序,微信支持跨通信运营商、跨操作系统平台通过网络快速发送免费语音短信、视频、图片和文字,同时,也可以使用通过共享流媒体内容的资料和基于位置的社交插件 "摇一摇"、"漂流瓶"、"朋友圈"、"公众平台"、"语音记事本" 等服务插件。
这篇文章主要介绍了微信 js-sdk 上传与下载图片接口用法, 结合实例形式分析了基于上传图片接口 (uploadImage) 和下载图片接口 (downloadImage) 针对图片操作的相关技巧, 需要的朋友可以参考下
本文实例讲述了微信 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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0523/331244.html