微信 JS-SDK: iOS 不能正确显示 wx.chooseImage() 调用的本机图片（或拍照）解决办法

H5项目用到微信JS-SDK拍照预览上传功能。

按 官方文档 思路实现，调用 wx.chooseImage()

测试阶段得到反馈安卓功能正常，iOS选择或拍照后不能显示预览图
解决办法也在同一份文档下，针对iOS机型额外做 wx.getLocalImgData() 即可以解决，并不难。

网上查资料绕了一下弯路，发现网络流传的资料不少有误。备忘一下，以防下次再次遇到。

解决方法

<script>

//uAgent判断手机是否iOS，主要用的是 isiOS
var u = navigator.userAgent; //识别各种浏览器
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

...
//在原来的 chooseImage() 回调中
wx.chooseImage({
    count: 1, // 默认9, 单张处理
    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
        let localId = localIds[0];
        if(isiOS){ //需要进一步转换为iOS兼容显示的方案
            wx.getLocalImgData({
                localId: localId, // 图片的localID
                success: function (res) {
                    var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                    html = "<li class=\"ico_img\" data-img=\""+localId+"\" onclick=\"popPreview(this)\"; style=\"background-image: url('"+localData+"'); background-size: cover; background-position: center center;\"></li>";
                    $("#img_bucket").append(html);
                }
            });

        }else{ //安卓，普通处理
            //提交表单的时候再进行上传操作
            html = '<li class="ico_img" data-img="'+localId+'" onclick="popPreview(this)"; style="background: url('+localId+'); background-size: cover; background-position: center center;"></li>';
            $("#img_bucket").append(html);
        }
    }
});

</script>

处理要点

• 判断终端设备类型
• 对iOS设备把 locaId 进一步转换成 localData ，就可以使用了。

该限制与JS-SDK 版本无关

网上有文章传这个问题只出在较早版本 js-sdk 在，1.2.0 及后续版本 chooseImage 和 getLocalImgData 方法进行了合并且不再存在iOS不显示预览问题。
错误的，在1.4.0版本下问题仍然存在。

当图像以 base64-data 形式且不是用于 img.src 而是用在 css background 时

考虑到CSS中使用base64图像数据作为填充背景可能会有问题，查到以下在 stackoverflow 的讨论。
在看完几十条回复和反馈后，亲自进行了验证，得出以下的结论

1. localData 以 data:image/png;base64, 作为开头，不需要自己补完格式

2. 原本 background:url('') 的可以直接用，不需要改写成 background-image: url('"+localData+"');（虽然也没问题）

3. 也不需要先 `img.attr("src",localData)，再 background:url(this.src)

事实证明是我想多了 Orz