h5中 wx.getLocalImgData接口的问题

这篇主要讲到wx.getLocalImagData接口的使用时需要注意的点。

wx.getLocalImgData({
localId: '', // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
}
});
该接口获取到的是图片的数据，这个数据有点坑。

文档上说这个数据是图片的base64码，然而？？？

在开发过程中，在IOS上得到的数据是一个图片的base64码，而在安卓机上就气死人了，刚开始并不知道，就一直在查找无法显示的问题。最后是在https://blog.csdn.net/qq_22509715/article/details/78289464得到了解答。安卓机上得到的是没有头部的base64码，且其中可能会包含换行符。这里的解决方案，可能会想到先判断是否IOS机，然后如果是则直接保存和显示数据，否则就给他加头部和替代换行符。但是在判断IOS机的浏览器时又遇到了问题，那就是微信IOS客户端的浏览器有WKWebView和WKWebView两种并且他们获取的变量不一致。觉得这样操作实在太麻烦了，于是换了一种思路来解决，那就时判断获取到的图片数据是否有base64头部，没有我就给它加上，这样子解决似乎更直接些。贴上最终代码：

 wx.getLocalImgData({
                localId: localIds[i],
                success: function (res) {
                    var localData = res.localData;
                    if (localData.indexOf('data:image') != 0) {
                        //判断是否有这样的头部
                        localData = 'data:image/jpeg;base64,' +  localData
                    }
                    localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
//第一个替换的是换行符，第二个替换的是图片类型，因为在IOS机上测试时看到它的图片类型时jgp，
//这不知道时什么格式的图片，为了兼容其他设备就把它转为jpeg
                    images.push(localData)//images是业务中用到的变量
                    showImage(localData)
                }
            });

 

 

 

https://blog.csdn.net/wangmj518/article/details/88096050

https://www.freesion.com/article/8875662919/