微信公众号网页如何调用拍照或从手机相册中选图接口(兼容Android与ios)

前言：最近在做公众号网页开发，我是第一次用微信公众号的接口，有某些功能需要用到微信公众号的接口，其中就有用到拍照或从手机相册中选图接口（wx.chooseImage）和获取本地图片接（wx.getLocalImgData），接下来我梳理一下我遇到的问题，及解决方案，如有错误，请指出。
如果是按照微信开发文档的步骤，第一步是绑定域名我就省略了。
1.首先在你需要用到接口的页面引入js文件，我引入的是:

<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2.进行js签名验证（通过config接口注入权限验证配置）
按照开发文档的配置就好了，我的是直接拿的后台给的数据

3.点击上传图片
我的前端页面是这样的：

通过点击调用wx.chooseImage

		//点击上传图片
		$(".choose-pic").eq(0).click(function(){
			wx.ready(function () {
				wx.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function (res) {
						getLocalImgData(res.localIds[0]);//获取本地图片
					}
				});
			})
		})
		

注意：wx.ready(function(){});config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
我的是通过点击事件触发的，可以放在wx.ready里面，也可以不放。
4.获取本地图片
在用wx.getLocalImgData获取本地图片的时候，我就遇到了问题，在ios是没有什么问题的，在Android就不行了，官网是这么描述的：

然后找了一下原因，发现在Android设备下的localData：

在ios设备下的localData：

可以看到Android是没有**data:image/png;base64,**的，所以在拿到res.localData的时候可以判断一下当前的设备
Android:

// 判断安卓
		function isAndroid() {
		    let  u = navigator.userAgent;
		    if (u.indexOf("Android") > -1 || u.indexOf("Linux") > -1) {
		        if (window.ShowFitness !== undefined) return true;
		    }
		    return false;
		}

IOS:

// 判断设备为 ios
		function isIos() {
		    let u = navigator.userAgent;
		    if (u.indexOf("iPhone") > -1 || u.indexOf("iOS") > -1) {
		        return true;
		    }
		    return false;
		}

封装的getLocalImgData(localId)

//获取本地图片
		function getLocalImgData(localId){
			wx.getLocalImgData({
				localId: localId, // 图片的localID
				success: function (res) {
					let localData = (isIos()?"":"data:image/png;base64,")+res.localData; // localData是图片的base64数据，可以用img标签显示
					$j(".choose-pic .camera").removeClass("display-block").addClass("display-none");
					$j(".choose-pic .punch-img").removeClass("display-none").addClass("display-block");
					$j(".choose-pic .del-punch-img").removeClass("display-none").addClass("display-block");
					$j(".choose-pic .punch-img img").attr("src",localData);
					let blobData=dataURLtoBlob(localData);
					formData.append("file",blobData);
				}
			});
		}

这样在不同的设备下就可以拿到图片了。