微信js-sdk上传与下载图片接口用法示例
本文实例讲述了微信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中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- 微信js-sdk地理位置接口用法示例
- 微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
- 解析微信JS-SDK配置授权,实现分享接口
- 微信JS-SDK选取手机照片上传功能
- 微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
- PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
- 微信 java 实现js-sdk 图片上传下载完整流程
- 微信js-sdk界面操作接口用法示例
- 最详细的ASP.NET微信JS-SDK支付代码
- php微信公众号js-sdk开发应用
- 微信JS-SDK坐标位置如何转换为百度地图坐标
- 详解基于Node.js的微信JS-SDK后端接口实现代码
- 微信js-sdk分享功能接口常用逻辑封装示例
- 微信JS-SDK分享功能的.Net实现代码
- php版微信js-sdk支付接口类用法示例
- ASP.NET MVC 微信JS-SDK认证
- 微信开发 JS-SDK 6.0.2 经常遇到问题总结
- 微信js-sdk+JAVA实现“分享到朋友圈”和“发送给朋友”功能详解
- ThinkPHP微信开发实例——JSSDK图像接口上传下载并将图片流写入本地
- 微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
- ThinkPHP微信实例——JSSDK图像接口多张图片上传下载并将图片流写入本地
- 微信js-sdk 上传图片、下载图片接口
- 使用微信JS-SDK上传图片,下载
- 微信js sdk图片接口 上传图片
- 调用微信JS-SDK接口上传图片
- 微信js-sdk图片接口实现一键上传.md
- 微信公众号开发《四》使用微信JS-SDK实现手机图片上传,支持压缩、预览。并下载图片到自身服务器
- thinkphp微信开发之jssdk图片上传并下载到本地服务器
- 微信 java 实现js-sdk 图片上传下载完整流程
- 微信js-sdk地理位置接口用法示例
- 微信js-sdk图片上传下载——java完整流程
- thinkphp微信开发之jssdk图片上传并下载到本地服务器
- 微信js-sdk,选择图片,上传,下载到本地,php服务端
- 微信js-sdk界面操作接口用法示例
- 微信js-sdk,选择图片,上传,下载到本地,php服务端
- 【原创】.Net 微信 JS-SDK图片、语音上传接口的实现(MVC)-(二 、上传图片服务器操作)
- 【原创】.Net 微信 JS-SDK图片、语音上传接口的实现(MVC)-(一 、上传图片)