需求

用WebView顯示用戶從手機(jī)相冊中選擇的圖片或視頻。

一、UIWebView加載本地圖庫選擇的圖片或視頻（真機(jī)）

UIWebView實(shí)現(xiàn)很簡單，直接調(diào)用JS方法，將選擇的圖片或視頻的全路徑分別放置<img>或<video>標(biāo)簽的src中就可以，直接就可以顯示。

部分代碼參考

插入圖片JS方法

function insertImage(url) {
        if(!url) return;
        document.execCommand('insertHtml', false, '<p><img class="MO_CLIP" style="max-width: 50% !important;" src="' + url + '"/></p><br>');
}

插入視頻JS方法

function insertVideo(url) {
        document.execCommand('insertHtml', false, '<p><video class="MO_CLIP" style="max-width: 50% !important; background:black;" src="' + url + '" controls="controls"></p><br>');
}

之后在選擇圖片或視頻的回調(diào)中將路徑傳遞進(jìn)去就可以顯示了。

二、WKWebView加載本地圖庫選擇的圖片或視頻（真機(jī)）

WKWebView實(shí)現(xiàn)比較麻煩，直接按照UIWebView那種加載方法會(huì)發(fā)現(xiàn)在真機(jī)上顯示不出來（網(wǎng)上有人說在模擬器上可以，有人說在真機(jī)上獲取的路徑有問題），用WKWebView實(shí)現(xiàn)的需要借助GCDWebServer，就是先在沙盒某一個(gè)目錄下設(shè)置服務(wù)的根目錄，將選擇的圖片或視頻復(fù)制一份到沙盒目錄某文件夾下，然后通過http://localhost/xxx這樣的方式去找到復(fù)制的圖片或者視頻，之后再調(diào)用JS方法，將選擇的圖片或視頻的全路徑分別放置<img>或<video>標(biāo)簽的src中就可以，就可以顯示了。需要用的三方庫GCDWebServer。

部分代碼參考

插入圖片和視頻的JS方法和上述一致

創(chuàng)建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];// 此處設(shè)置本地服務(wù)器根目錄
    });
    return _sharedInstance;
}

開啟監(jiān)聽

//本地服務(wù)開始監(jiān)聽
    if (![[GCDWebServerUtils sharedInstance] isRunning]) {//如果當(dāng)前還在運(yùn)行的話就不在啟動(dòng)了
        [[GCDWebServerUtils sharedInstance] startWithPort:80 bonjourName:nil];
    }

綜上，WKWebView加載的HTML中就再插入本地視頻標(biāo)簽<video>和圖片標(biāo)簽<img>就可以正常顯示了。