代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>微信 js sdk 选择图片的使用</title>
<style>
.choose {
width: 100px;
height: 60px;
line-height: 60px;
}
</style>
</head>
<body>
<div class="choose" id="choose">选择图片</div>
<div>
<img id="imgEle" src="" alt="">
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
$(function(){
$.ajax({
type: 'post',
url: '/js-sign/',
data: {url: location.href.split('#')[0]},
dataType: 'json',
beforeSend: function (xhr) {
xhr.setRequestHeader('x-csrftoken', 'Your oken');
},
success: function(sign) {
alert(JSON.stringify(sign));
wx.config({
beta: true,
debug: true,
appId: sign.appId,
timestamp: sign.timestamp,
nonceStr: sign.nonceStr,
signature: sign.signature,
jsApiList: ['chooseImage', 'getLocalImgData']
});
},
error:function(xhr,state,errorThrown){
alert('调用jssdk接口失败');
}
});
$('#choose').click(function(){
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
defaultCameraMode: 'front',
success: function(res) {
const u = navigator.userAgent;
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
if(isAndroid) {
alert('isAndroid'+res.localIds[0]);
$('#imgEle').attr('src', res.localIds[0]);
}else{
try {
wx.getLocalImgData({
localId: res.localIds[0],
success: function(res2) {
alert('ios'+res2.localData);
$('#imgEle').attr('src', res2.localData);
}
});
} catch (error) {
alert('getLocalImgData ...');
}
}
}
});
});
});
</script>
</body>
</html>
发表评论：