首先在js中要引入jweixin.js
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
在调取拍照之前,进行微信环境配置
wx.config({
debug: false,
appId: '此公众号的id', // 必填,公众号的唯一标识
timestamp: {$jsSign['timestamp']}, // 必填,生成签名的时间戳,切记时间戳是整数型,别加引号
nonceStr: '{$jsSign.noncestr}', // 必填,生成签名的随机串
signature: '{$jsSign.signature}', // 必填,签名,见附录1
jsApiList: [
'checkJsApi',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'onMenuShareTimeline',
'onMenuShareAppMessage',
]
});
接下来就是通过一个点击事件来触发拍照功能咯
var serverId=[];
serverId[0] = [];
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
// 上传图片并获取信息
$(“触发点").on('click',function(){
var _this = $(this);
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var localIds = res.localIds;
// 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
syncUpload(localIds,_this); // 图片的下载
/*localIds.forEach(function(element){
_this.attr('data-tab',element);
_this.attr('src',element);
});*/
}
});
});
var syncUpload = function(localIds,_this){
var localId = localIds.shift();
var has = _this;
wx.uploadImage({
localId: localId,
success: function (res) {
if(has.hasClass("")){
serverId[0].push(res.serverId); // 返回图片的服务器端ID
$.ajax({
type: "post",
url: "{:Url('User/setHeader')}",
data: {
header: serverId // 这里是二级数据形式
},success: function (data) {
if (data.code == 1) {
// has.attr('data-tab',data.data);
// has.attr('src',data.data);
location.reload();
}else {
}
},error: function (data) {
swal({
title: "",
text: '上传失败,请重新上传',
type: 'error',
showCancelButton: false,
confirmButtonText: "确定",
allowOutsideClick:false,
timer: 1500
});
}
})
}
// 其他对serverId做处理的代码
if(localIds.length > 0){
if(isiOS){
syncUpload(localIds,_this);
}else{
setTimeout(function(){
syncUpload(localIds,_this);
},500)
}
}
}
});
};
});
补充下html的代码
<img class="img" src="" data-tab="">
<input type="file" class="hide" id="upload" accept="image/*">