使用 微信JS-SDK 拍照 或者获取 相册 图片并展示

时间:2024-03-04 21:01:16

最近有在微信公众号的项目需要使用照相机,所以研究了一下微信的拍照功能,以下是具体流程:

根据微信的开发文档,想要使用微信的jssdk,需要5个步骤: 
(1)步骤一:绑定域名 
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 
(2)步骤二:引入JS文件 
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js 
备注:支持使用 AMD/CMD 标准模块加载方法加载 
(3)步骤三:通过config接口注入权限验证配置 
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用;

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: \'\', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: \'\', // 必填,生成签名的随机串
    signature: \'\',// 必填,签名
    jsApiList: [] // 必填,需要使用的JS接口列表
});

注意:congfig里面的参数都是必填项,其中 appId 、timestamp 、nonceStr 、signature 是需要和微信交互获取的,在本项目中,是后台与微信交互,所以由后台获取,但需要传当前url地址给后台去签名; 
然后,jsApiList是一个数组,里面填入你想要使用的接口,具体有哪些接口可以查看微信文档,选择照片的话需要用到:chooseImage(拍照或从手机相册中选图接口)、getLocalImgData(获取本地图片接口)

(4)步骤四:通过ready接口处理成功验证 
config信息验证后会执行ready方法所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。

wx.ready(function(){
    // dosomething
});

对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。而我们需要调用相机或者相册属于触发型的操作,所以只需要在用户操作时调用接口即可:

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

    这里有个坑,不知道是不是我使用错误造成的,就是文档中说的:‘返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片’,并不能实现,所以需要用到getLocalImgData接口将图片显示给用户看。 
    - 获取本地图片接口:

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

getLocalImgData 接口只需要传一个参数 localId ,这个参数我们可以通过 chooseImage 接口拿到,然后 getLocalImgData 接口会返回一个 值 localData ,这个值就是图片的base64数据,可以用img标签显示,但需要注意的是,安卓和 IOS 机型得到的 localData 会不一样:IOS 得到的已经是加了base64格式的图片了,所以可以直接在img标签使用;但安卓机型返回的是 localData 是缺少 base64 格式前缀的,所以需要加上 ‘data:image/jpeg/png;base64,’,才可以在img标签使用。

所以最终代码是:

wx.chooseImage({
    count: 1, // 默认9,这里每次只处理一张照片
    sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图,默认二者都有
    sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机,默认二者都有
    success: function(res) {
        var localId = res.localIds[0].toString();//因为我们只取一张,所以只有将数组的第一项转字符串保存起来传给 getLocalImgData 方法即可
        wx.getLocalImgData({
            localId: localId, // 图片的localID
            success: function(res) {
                console.log(res);
                if(window.isIOS) {
                    console.log(\'ios\');
                    //这里需要注意的是,尽管ios返回的是base64编码的字符串,但前缀还是有点不一样,是:\'data:image/jgp/png;base64\';
                    //网上很多文章都说要按一下方式替换掉‘jgp’为‘jpeg’,但实际操作发现,不替换也可以正常显示,所以本人就不替换了,直接取值使用
                    //$scope.imgUrl = res.localData.replace(\'jgp\', \'jpeg\');//替换‘jgp’为‘jpeg’
                    $scope.imgUrl = res.localData;//赋值显示
                } else if(window.android) {
                    $scope.imgUrl = \'data:image/jpeg/png;base64,\' + res.localData; // localData是图片的base64数据,可以用img标签显示
                }
            }
        });
    }
});

(5)步骤五:通过error接口处理失败验证

wx.error(function(res){
    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});

  转载:https://blog.csdn.net/weixin_36882413/article/details/80674565