UIWebView和WKWebView加载本地图库选择的图片和视频

需求

用WebView显示用户从手机相册中选择的图片或视频。

一、UIWebView加载本地图库选择的图片或视频（真机）

UIWebView实现很简单，直接调用JS方法，将选择的图片或视频的全路径分别放置或标签的src中就可以，直接就可以显示。

部分代码参考

插入图片JS方法

function insertImage(url) {
        if(!url) return;
        document.execCommand('insertHtml', false, '

');
}

插入视频JS方法

function insertVideo(url) {
        document.execCommand('insertHtml', false, '

');
}

之后在选择图片或视频的回调中将路径传递进去就可以显示了。

二、WKWebView加载本地图库选择的图片或视频（真机）

WKWebView实现比较麻烦，直接按照UIWebView那种加载方法会发现在真机上显示不出来（网上有人说在模拟器上可以，有人说在真机上获取的路径有问题），用WKWebView实现的需要借助GCDWebServer，就是先在沙盒某一个目录下设置服务的根目录，将选择的图片或视频复制一份到沙盒目录某文件夹下，然后通过http://localhost/xxx这样的方式去找到复制的图片或者视频，之后再调用JS方法，将选择的图片或视频的全路径分别放置或标签的src中就可以，就可以显示了。需要用的三方库GCDWebServer。

部分代码参考

插入图片和视频的JS方法和上述一致

创建GCDWebSerVer单例

+ (GCDWebServer*)sharedInstance
{
    static GCDWebServer *_sharedInstance = nil;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        _sharedInstance = [[GCDWebServer alloc] init];
        NSString *documentPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,
                                                                      NSUserDomainMask,
                                                                      YES) objectAtIndex:0];
        [_sharedInstance addGETHandlerForBasePath:@"/" directoryPath:documentPath indexFilename:nil cacheAge:3600 allowRangeRequests:YES];// 此处设置本地服务器根目录
    });
    return _sharedInstance;
}

开启监听

//本地服务开始监听
    if (![[GCDWebServerUtils sharedInstance] isRunning]) {//如果当前还在运行的话就不在启动了
        [[GCDWebServerUtils sharedInstance] startWithPort:80 bonjourName:nil];
    }

综上，WKWebView加载的HTML中就再插入本地视频标签和图片标签就可以正常显示了。