H5获取系统相册照片方案
1.方法一：H5使用input标签获取
H5 需要选取系统相册的一个图片,可以用 H5 标签，打开相机，打开相册等，来选取手机的资源文件，在标签绑定回调方法，会接到系统给你回调的文件资源。代码如下
<div style="height: 200px;width: 600px;background-color: aliceblue;">
<input style="height: 200px;width: 600px;font-size: 20px;" id="file" type="file" accept="image/png,image/gif,image/jpg" name="file" />
</div>
document.querySelector('#file').onchange = function (){
if(this.files.length){
let file = this.files[0];
console.log('读取文件');
let reader = new FileReader();
//新建 FileReader 对象
reader.onload = function(){
// 当 FileReader 读取文件时候，读取的结果会放在 FileReader.result 属性中
document.querySelector('#img').src = this.result;
document.querySelector('#text').innerHTML = this.result;
};
// 设置以什么方式读取文件，这里以base64方式
reader.readAsDataURL(file);
}
}
2.使用NSURLProtocol 拦截 重新返回数据
UIWebView 也是可以被 NSURLProtocol 拦截的，但 WKWebView 不可以。（因为 WKWebView 是基于 WebKit，并不走 C socket。
3. base64通过bridge传递数据
通过 Base64 的编码来解决 H5Image 标签显示图片的问题，定义好bridge 把图片二进制的一个字节转成一个字符，但是如果图片过大，产生的字符串很长，会导致 H5 和 Natvie 传输很慢，会让页面有卡死的现象。
4.通过 App 本地开启 Server 服务
这个方案已经测试 可以读取沙盒里的图片
<div style="width: 300px;height: 300px;"> <img style="width: 300px;height: 300px;" src="http://localhost:9999/Documents/csop/0.jpg"></div>
let webServer = GCDWebServer()
webServer.addGETHandler(forBasePath: "/", directoryPath: NSHomeDirectory(), indexFilename: nil, cacheAge: 3600, allowRangeRequests: true)
webServer.start(withPort: 9999, bonjourName: "GCD Web Server")
LLog("Visit \(webServer.serverURL) in your web browser")
