微信图像操作

基本步骤

1.引入JS文件，在需要调用JS接口的页面引入JS文件:
（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
2.通过config接口注入权限验证配置，所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用）；
3.通过ready接口处理成功验证。
详见：微信分享js自定义配置

封装工具类

基于微信分享js自定义配置的工具类，将jsApiList中添加图片接口的支持

var weixin = {
    ... 省略一万行
    use: function() {
        var wx = window.wx;
        var config = Object.assign({}, { debug: false, jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone',
            'chooseImage',      //拍照或从手机相册中选图接口
            'previewImage',     //预览图片接口
            'uploadImage',      //上传图片接口
            'downloadImage',    //下载图片接口
            'getLocalImgData',  //获取本地图片接口
            ]}, this.token);
        wx.config(config);
        var option = this.option;
        //调试微信接口
        wx.error(function(res) {
            window.alert('res');
        });
    }
    ... 省略一万行
}

拍照或从手机相册中选图接口

wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
    }
});

预览图片接口

wx.previewImage({
    current: '', // 当前显示图片的http链接
    urls: [] // 需要预览的图片http链接列表
});

上传图片接口

wx.uploadImage({
    localId: '', // 需要上传的图片的本地ID，由chooseImage接口获得
    isShowProgressTips: 1, // 默认为1，显示进度提示
    success: function (res) {
        var serverId = res.serverId; // 返回图片的服务器端ID
    }
});

备注：上传图片有效期3天，可用微信多媒体接口下载图片到自己的服务器，此处获得的 serverId 即 media_id。

下载图片接口

wx.downloadImage({
    serverId: '', // 需要下载的图片的服务器端ID，由uploadImage接口获得
    isShowProgressTips: 1, // 默认为1，显示进度提示
    success: function (res) {
        var localId = res.localId; // 返回图片下载后的本地ID
    }
});

获取本地图片接口[base64]

wx.getLocalImgData({
    localId: '', // 图片的localID
    success: function (res) {
        var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
    }
});

备注：此接口仅在 iOS WKWebview 下提供，用于兼容 iOS WKWebview 不支持 localId 直接显示图片的问题。具体可参考《iOS网页开发适配指南》

相关文献

• 微信分享js自定义配置
• javascript方式上传图片到七牛