使用 takeSnapshot 的 WKWebView 的间歇性空白/部分屏幕截图答案

【问题标题】：intermittent blank/partial screenshots of WKWebView using takeSnapshot使用 takeSnapshot 的 WKWebView 的间歇性空白/部分屏幕截图
【发布时间】：2019-03-31 10:32:34
【问题描述】：

我正在 javascript 评估的完成处理程序中截取 WKVebView 的屏幕截图：

func loadPage(){
    let fileURL = URL(fileURLWithPath: "...")
    let baseUrl = URL(fileURLWithPath: "...")
    webView?.navigationDelegate = self
    webView.loadFileURL(fileURL, allowingReadAccessTo: baseUrl)
}

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webView.evaluateJavaScript("....") { (result, error) in
        let configuration = WKSnapshotConfiguration()
        configuration.rect = CGRect(origin: .zero, size: (self.webView?.frame.size)!)
        self.webView!.takeSnapshot(with: configuration, completionHandler: { (image, error) in
            // do something with the image
        })
}

即使它在 webView.evaluateJavaScript 函数的完成处理程序中，如果内容经常无法完成渲染，我会得到空白屏幕截图或部分截图（仅存在一些元素）。

如何确保在截屏前渲染完成（我不想引入固定延迟）

【问题讨论】：

标签： swift macos cocoa screenshot wkwebview

【解决方案1】：

由于 WebView 的内容比屏幕尺寸大，所以首先我们将获取内容的高度和宽度，然后我们将截图

  func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {

    // Will get Height and Width of the Content

    self.webView.evaluateJavaScript("document.readyState", completionHandler: { (complete, error) in
        if complete != nil {
            self.webView.evaluateJavaScript("document.body.scrollHeight", completionHandler: { (height, error) in
                guard let contentHeight = height as? CGFloat else { print("Content height could not be obtained"); return }
                self.webView.evaluateJavaScript("document.body.scrollWidth", completionHandler: { [weak self](width, error) in
                    let contentWidth = width as! CGFloat
                    let rect = CGRect(x: 0, y: 0, width: contentWidth, height: contentHeight)
                    self?.takeScreenshot(rect)
                })
            })
        }
    })

}

一旦我们得到高度和宽度，我们将调用下面的方法来截屏

func takeScreenshot(_ rect: CGRect) {
    webView.evaluateJavaScript(".....") { (result, error) in
        let configuration = WKSnapshotConfiguration()
        configuration.rect = rect//CGRect(origin: .zero, size: (self.webView?.frame.size)!)
        self.webView!.takeSnapshot(with: configuration, completionHandler: { (image, error) in
            // do something with the image
            print("image:\(image!)")
        })
    }
}

希望对你有所帮助。

【讨论】：

当你评估Javascript时，不幸的是这个委托没有被调用。
好的，你能告诉我你在 WKWebView 中加载 html 的代码吗
最初的问题提供更多的上下文
@AP。我已经编辑了我的答案，请尝试它会起作用。
@AP。请检查并告诉我。

【解决方案2】：

您需要等到所有元素都加载到 webview 中。您可以在截屏前添加计时器。

RunLoop.main.run(直到: Date.init(timeIntervalSinceNow: 0.5))

【讨论】：