微信接口之拍照上传

问题的初衷:用,在安卓系统下不能调用照相机,因此选择调用微信提供的接口

/*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都可以了

你可能感兴趣的:(微信接口之拍照上传)