JSSDK中getLocalImgData的用法

一、写前

        好长时间没写博客了，关键是最近实在是没什么时间，今天来给大家分享一个我在项目中遇到的大坑，帮助大家前做好防范。

二、正文

        最近公司在开发微信公众号的项目，其中有一个功能是描述在手机端相册中选择图片上传，并且在页面上显示所选的图片。按照官方文档的顺序顺利搭建微信的开发环境，图片能够顺利在相册中选择和上传，但是在Android机上能够正常显示所选的图片，在IOS上展位图片存在，可是图片却显示空白，这是怎么回事，原来在微信官网上有详细的解释，有两种解释方案：
（一）查看页面上引用的微信API的版本是否大于1.0.0
如页面上引用的js如下

<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

改为

<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

因为

1.2.0以下版本的JSSDK不再支持通过使用chooseImage api返回的localld以如：”img src=wxLocalResource://50114659201332”的方式预览图片。

适配建议：直接将JSSDK升级为1.2.0最新版本即可帮助页面自动适配，但在部分场景下可能无效，此时可以使用，注意只是部分场景下适配。

（二）在js文件下判断当前的手机系统是否使用的是WKWebview

1.微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核，需要网页开发者提前做好网站的兼容检查和适配。
2.此接口仅在 iOS WKWebview 下提供，用于兼容 iOS WKWebview 不支持 localId 直接显示图片的问题。具体可参考《iOS网页开发适配指南》

此时就要轮到getLocalImgData方法出场了，具体使用方法我在下面一步一步的实现：
第一步：通过ajax请求获取微信相关配置

$.ajax({
        url: "/oauth/jsapi/sdk?url=" + encodeURIComponent(window.location.href),
        type: "GET",
        dataType: "json",
        async: true,
        beforeSend: function () {
            new Alertparent('light', "loading", "请稍后...");
        },
        success: function (pross) {

            //关闭弹出层
            $('.mark').remove();
            $('.alertwrap').remove();

            var result = pross.data;
            if(result){
                wxAuthObject = result;
                wxInit(wxAuthObject);        //调用初始化微信的信息
            }
        },
        error: function () {
            //关闭弹出层
            $('.mark').remove();
            $('.alertwrap').remove();
            new Alertparent("know", "error", "请求发送失败！")
            $(".gonext").removeAttr("disabled");
            rancode();
        }
    });

第二步：初始化微信的函数------ wxInit(wxAuthObject)

//配置微信
    function wxInit(result) {

        wx.config({
            debug: false,
            appId: result.appId,
            timestamp: result.timestamp,
            nonceStr: result.nonceStr,
            signature: result.signature,
            jsApiList: [
                "chooseImage",
                "previewImage",
                "uploadImage",
                "downloadImage"]
        });
    }

第三步：点击上传按钮调用微信接口

//用户发起图片上传请求
    $(".uploadingimg_wxjssdk").on("click", function () {
        var that = $(this);
        //调用上传函数
        wxchooseimges(that,serverids);
    });

第四步：选择图片

 //上传图片功能函数
    function wxchooseimges(that,arr) {
        wx.ready(function () {
            //第一步   选择图片
            wx.chooseImage({
                count: 9,             //可以实现多选
                //count: 1,
                sizeType: ['original', 'compressed'],
                sourceType: ['album', 'camera'],
                success: function (res) {
                    var localIds = res.localIds;
                 
                    /*判断ios是不是用的 wkwebview 内核*/
                    if (window.__wxjs_is_wkwebview){

                        for (var i = 0; i < localIds.length; i++){
                            wx.getLocalImgData({
                                localId:res.localIds[i],
                                success: function (res){
                                    var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                                    localData = localData.replace('jgp', 'jpeg');//iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下
                                    var uploadbutton = "<span class='upImg'>![](../images/deleteImg.png)![]( + localData + )</span>";
                                    $(uploadbutton).insertBefore(that);
                                    $(".deleteDom").on("click",function(){
                                        $(this).parent().remove();
                                    });
                                }
                            })
                        }
                    }else{   //如果不是用的wkwebview 内核 或者是用的安卓系统 执行下面的xunh
                        for (var i = 0; i < localIds.length; i++) {
                            var uploadbutton = "<span>![](../images/deleteImg.png)![]( + localIds[i] + )</span>";
                            $(uploadbutton).insertBefore(that);
                        }
                        $(".deleteDom").on("click",function(){
                            $(this).parent().remove();
                        });
                    }

                    syncUpload(localIds, arr);
                }
            });
        });
    }

其中

wx.getLocalImgData({
              localId:res.localIds[i],
              success: function (res){
                     var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                     localData = localData.replace('jgp', 'jpeg');//iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下
               }
     })

是基本套路。

三、结束语

        这个问题困扰了我很久，希望对大家有所帮助，同时也欢迎大家提出问题。谢谢！