微信JS-SDK图像接口的具体实现

来源:互联网 发布:js获取当前时间显示 编辑:程序博客网 时间:2024/06/06 23:56

图像选择、上传、预览、下载

首先就是通过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就是图片的字节流啦,然后自己写入磁盘就行了,别怪我不贴代码,随便百度一下就可以了。
原创粉丝点击