问题的初衷:用<input type="file">,在安卓系统下不能调用照相机,因此选择调用微信提供的接口
/*wx.chooseImage开始*/
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
$('.u_content').hide();
var localId = res.localIds[0];
document.getElementById('image').src = localId;
// alert('localData:'+localData);
//用这种方式来获取到图片的宽和高,因为直接通过$('#image').width()获取到的图片宽为0
img.onload=function(){
var w1=img.width;
var h1=img.height;
var h2=parseInt($('#image').height());
var w2=parseInt(h2/h1*w1);
$('.select_btn').css({'width':w2+'px','height':h2+'px','margin-left':-w2/2+'px'});
$('#image').css({'width':w2+'px','margin-left':-w2/2+'px'});
}
img.src=localId;
/*wx.getLocalImgData开始*/
wx.getLocalImgData({
localId: localId,
success: function (res) {
var localData = res.localData;// localData是图片的base64数据,可以用img标签显示
//如果是安卓系统
if(!localData.split(',')[1]){
localData = 'data:image/jpeg;base64,'+localData;//安卓系统获取到的base64数据没有'data:image/jpeg;base64,'前缀,所以必须手动加上
}else{
//localData = localData.replace('jgp', 'jpeg');
document.getElementById('image').src = localData;
img.onload=function(){
var w1=img.width;
var h1=img.height;
var h2=parseInt($('#image').height());
var w2=parseInt(h2/h1*w1);
$('.select_btn').css({'width':w2+'px','height':h2+'px','margin-left':-w2/2+'px'});
$('#image').css({'width':w2+'px','margin-left':-w2/2+'px'});
}
img.src=localData;
}
imgUrl=convertBase64UrlToBlob(localData);
alert('imgUrl:'+imgUrl);
},
fail:function(){
alert('预览照片失败');
}
});
/*wx.getLocalImgData结束*/
遇到的问题:
-
1.2.0以下版本的JSSDK不再支持通过使用chooseImage api返回的localld以如:”img src=wxLocalResource://50114659201332”的方式预览图片。
适配建议:直接将JSSDK升级为1.2.0最新版本即可帮助页面自动适配,但在部分场景下可能无效(ios系统就不可以),此时可以使用getLocalImgData 接口来直接获取数据。 -
由于iOS不支持用localId来预览图片,所以想着都用getLoaclImgData,IOS确实可以了,但是安卓对getLoaclImgData预览图片功能的支持不好,导致程序死掉或者反应很慢。所以只能针对不同的系统 选择不同接口,这样安卓和ios都可以了
网友评论