2022-05-21

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 服务

本地开启server H5加载ios本地图片资源

本地开启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")