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

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

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