最近有在微信公众号的项目需要使用照相机,所以研究了一下微信的拍照功能,以下是具体流程:
根据微信的开发文档,想要使用微信的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可以在这里更新签名。
});