微信JS-SDK图像接口的具体实现
2017-05-27 09:38
633 查看
图像选择、上传、预览、下载
首先就是通过config接口注入权限验证配置这个就不多说了,通过百度大家基本上都可以自行解决。图像选择
wx.chooseImage({ count: 1, // 默认9,这个是可以选择图片的数量 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有。 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片(这个res.localIds可以定义一个全局的数组变量去储存) } });
localId可以作为img标签的src属性显示图片,其实在这里有一个问题,当在IOS上面的时候可能会有图片不显示的问题,这好像是内核的问题,把引入的JS版本改一下即可正常显示了(2017-5-27版本)。
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
图片上传
wx.uploadImage({ localId: '', // 需要上传的图片的本地ID,由chooseImage接口获得 isShowProgressTips: 1// 默认为1,显示进度提示 success: function (res) { var serverId = res.serverId; // 返回图片的服务器端ID } });
这是官网的文档,这是最坑的地方,当你上传多张图片的时候,我们一般会循环chooseImage函数所得到的的localIds集合,循环调用uploadImage函数,你会发现你调不起来。所以我把异步上传强行写为串行(递归)执行这个函数。
var uploadCount = 0;// 上传图片的坐标 function upload() { var leng = localId.length; //需要上传图片的本地ID的数组长度 if (parseInt(uploadCount) < parseInt(leng)) { wx.uploadImage({ localId: localId[uploadCount], // 需要上传的图片的本地ID,由chooseImage接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 success: function (res) { serverIds.push(res.serverId); // serverIds是我定义的全局数组变量 uploadCount++; upload(); } }); } else { // .... 这里是上传完图片的代码 } }
图片预览
wx.previewImage({ current: '', // 当前显示图片的http链接 urls: [] // 需要预览的图片http链接列表 });
这个预览没什么问题,按照官方的文档轻松就做出来了。
图片下载
首先说一点,我做的图片下载并没有用js接口,是调用的API,微信可以为我们保存三天。所以我们要下载图片到我们自己的服务器上面,所以我在java里面写的,方便我储存在本地。public final String photo_api_ul = "https://qyapi.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID"; //记得要替换成自己的ACCESS_TOKEN和MEDIA_ID(上传成功返回的ID) URL url = new URL(requestUrl); URLConnection con = url.openConnection(); InputStream is = con.getInputStream(); //因为从微信拿到的byte太大,其实图片没那么大,所以你们可以选择循环读取,也可以像我这样转成图片对象再次获取字节流 BufferedImage bufferedImage = ImageIO.read(is); ByteArrayOutputStream out = new ByteArrayOutputStream(); ImageIO.write(bufferedImage, "jpg", out); byte[] b = out.toByteArray(); // b就是图片的字节流啦,然后自己写入磁盘就行了,别怪我不贴代码,随便百度一下就可以了。
相关文章推荐
- 解析微信JS-SDK配置授权,实现分享接口
- 微信JS-SDK接口 + FLASK实现图片上传
- PHP实现微信JS-SDK接口选择相册及拍照并上传的方法 lieren_chengshi 2016-12-05 8463 查看 0评论 公开 原文 举报 取精 添加收藏 本文实例讲述了
- 详解基于Node.js的微信JS-SDK后端接口实现代码
- 微信JS SDK配置授权,实现分享接口
- 微信JS-SDK之图像接口开发详解
- 【原创】.Net 微信 JS-SDK图片、语音上传接口的实现(MVC)-(二 、上传图片服务器操作)
- 【原创】.Net 微信 JS-SDK图片、语音上传接口的实现(MVC)-(一 、上传图片)
- 微信JS-SDK之图像接口开发详解
- PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
- 微信JS-SDK之图像接口开发详解
- 微信js-sdk图片接口实现一键上传.md
- ThinkPHP微信实例——JSSDK图像接口多张图片上传下载并将图片流写入本地
- ThinkPHP微信开发实例——JSSDK图像接口上传下载并将图片流写入本地
- 基于Node.js的微信JS-SDK后端接口实现
- 微信JS-SDK之图像接口开发详解
- 解析微信JS-SDK配置授权,实现分享接口
- 微信JS SDK配置授权,实现分享接口
- PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
- ASP.NET WEBAPI实现微信JS-SDK接口注入权限验证配置