您的位置:首页 > 移动开发 > 微信开发

微信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就是图片的字节流啦,然后自己写入磁盘就行了,别怪我不贴代码,随便百度一下就可以了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息