WKWebView-插入本地图片到html

来源：互联网发布：淘宝订单同步接口编辑：程序博客网时间：2024/06/05 17:53

在开发的过程中使用WKWebView是很常见的一件事，现在我们可能遇到一个需求：需要加载本地的html文件，然后插入本地的图片到html显示出来。

真正的应用场景：像问答产品类app，在回答页面是一个编辑器，我们可以输入文字，图片，并进行各种操作，那么我们如何实现拍照或者是从相册库中拿到图片插入到编辑器中呢？其实实现原理跟我们需求是一样的，下面一起来看看如何实现：

简单了解：

1）我们需要使用WKWebView的loadFileURL方法，但是该方法是iOS9才可以使用，如果要适配iOS8，那么需要简单适配一下

/*! @abstract Navigates to the requested file URL on the filesystem.     @param URL The file URL to which to navigate.     @param readAccessURL The URL to allow read access to.     @discussion If readAccessURL references a single file, only that file may be loaded by WebKit.     If readAccessURL references a directory, files inside that file may be loaded by WebKit.     @result A new navigation for the given file URL.     */@available(iOS 9.0, *)open func loadFileURL(_ URL: URL, allowingReadAccessTo readAccessURL: URL) -> WKNavigation?

我们可以看到方法的第一个参数是访问文件的URL，第二个参数是允许访问的URL，即如果readAccesssURL是一个单一的文件，那么webkit就只加载该文件，如果readAccesssURL是一个目录，那么目录下所有的文件都能过被webkit访问。

2）需要注意一点：如果想使用WKWebView加载本地html显示图片，那么需要图片和html在同一个目录下，这也就是为什么我们使用loadFileURL。

具体实现

import UIKitimport WebKitimport Kingfisherclass ViewController: UIViewController {        var images = ["https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6YQR9G2znaeh1jNxFXmRUC5ZSM4T_AUBhVDKPXJ7BCz4CHpx62w",                  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ87JU0S8F0srXdXcNlUp8-R3O0-VPx-nsQqpkPJHf-2nQWIc7f"]        let kingfiserManager = KingfisherManager.shared    let fileManager = FileManager.default    var webView: WKWebView!    override func viewDidLoad() {        super.viewDidLoad()                webView = WKWebView(frame: view.frame)        webView.navigationDelegate = self        view.addSubview(webView)                guard let path = Bundle.main.path(forResource: "test", ofType: "html") else {            return        }        let fileURL = URL(fileURLWithPath: path)        // 文件，图片存储目录        let directoryURL = URL(fileURLWithPath: kingfiserManager.cache.diskCachePath)        do {            try fileManager.createDirectory(at: directoryURL, withIntermediateDirectories: true, attributes: nil)            // 目的文件URL            let destinationURL = directoryURL.appendingPathComponent(fileURL.lastPathComponent)            // 判断文件是否存在，不存在就copy一份            if !fileManager.fileExists(atPath: destinationURL.path) {                try fileManager.copyItem(at: fileURL, to: destinationURL)            }            // 加载html            if #available(iOS 9.0, *) {                webView.loadFileURL(destinationURL, allowingReadAccessTo: directoryURL)            } else {                webView.load(URLRequest(url: destinationURL))            }        } catch {            print("error: \(error)")        }    }        func downloadImage() {        images.forEach { [weak self] url in         self?.startDownloadImage(url)        }    }        func startDownloadImage(_ url: String) {        kingfiserManager.retrieveImage(with: URL(string: url)! , options: nil, progressBlock: nil) { [weak self] (image, error, cacheType, url) in            guard let image = image, let imageUrl = url else { return }            // 执行js函数插入相片            self?.evaluteJSFuncation(imageUrl.absoluteString)        }    }        func evaluteJSFuncation(_ imageUrl: String) {        webView.evaluateJavaScript("addImage('\(imageUrl)')", completionHandler: nil)    }}extension ViewController: WKNavigationDelegate {    //加载成功    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {        downloadImage()    }}

可以看到，demo很简单，demo使用CocoaPods安装了Kingfisher，用于下载图片。整体思路：

1）获得图片存储的路径

2）将本地html文件copy到图片存储的目录下（这里仅仅是作为一个demo，真正开发的时候根据自己的需求存储到对应的路径下）

3）webView加载html，再webView加载完成之后开始下载图片，图片下载成功插入到html中

注意几点：

1）demo中仅仅是只有html文件，真正开发还有css,和js等一系列文件，实现原理一样，把所有文件放在同一目录下即可，导入文件的时候使用引入的方式，然后copy整个文件夹即可

2）如果上面不使用loadFileURL，直接使用load(_ request: URLRequest)方法也是可行的

html文件内容如下，非常简单，执行addImage函数，插入图片到body中：

<html>    <head>        <meta charset="utf-8" />        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>        <script>            function addImage(url) {                $("body").append("<div><img src='" + url + "' /></div>")            }        </script>    </head>    <body>    </body></html>

效果如下，显示2张图片：

阅读全文

0 0