,在安卓系统下不能调用照相机,因此选择调用微信提供的接口 遇到...">
美文网首页
微信接口之拍照上传

微信接口之拍照上传

作者: 小蜗牛的碎碎步 | 来源:发表于2017-10-11 15:48 被阅读0次

    问题的初衷:用<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都可以了

    相关文章

      网友评论

          本文标题:微信接口之拍照上传

          本文链接:https://www.haomeiwen.com/subject/lcuwyxtx.html