公众号开发之getLocalImgData兼容性问题

问题

最近开发公众号的时候遇到了很多坑所以记录一下
有个需求是用户选择图片后需要进行裁剪预览等功能所以找了很久发现还是直接用wexin_js_sdk比较方便下面简称sdk
一共用到了里面的三个接口chooseImage用来选择图片,previewImage用来预览图片getLocalImgData用来获取图片的base64
前两个API都没啥问题就是getLocalImgData这个API经过测试在开发工具和iOS上面是正常的但是在安卓上面获取到的base64是有问题的导致无法赋值给img标签也没办法转成File类型传给后台
经过一番查阅发现是由于安卓和iOS在微信内部的浏览器不一致导致的，经过验证安卓调getLocalImgData拿到的localData缺少data:image头部并且多了很多换行符

解决方案

有两种思路，一种是判断当前环境是IOS还是安卓但是这种方案比较麻烦点因为IOS有两种浏览器内核，第二种方案就是判断获取到的localData是否有data:image这个头部如果没有就加上

代码

window.wx.getLocalImgData({
    localId: id, // 图片的localID
    success:res => {
        let {localData} = res; // localData是图片的base64数据，可以用img标签显示
        if (localData.startsWith('data:image')) { //判断是否有这样的头部
            // 没有则加上头部
            localData = 'data:image/jpeg;base64,' +  localData
        }
        // 去掉所以换行符
        localData = localData.replace(/\r|\n/g, '') 
    }
});