ios - WKWebKit takeSnapshot(with snapshotConfiguration :) not working on iOS device

Question

我做错了什么......？

在 iOS 上，我想拍摄完整网页的快照。在 iOS 11 之前，如果不处理一大堆逻辑来滚动 WKWebView 的 scrollView 等，这是不可能的。

以下错误已报告给 Webkit 并已修复:https://bugs.webkit.org/show_bug.cgi?id=161450

导致此更改:https://trac.webkit.org/changeset/212929/webkit

这现在为我们在 iOS 11 上提供了一个很好的 API 来拍摄 WKWebView 内容的快照:https://developer.apple.com/documentation/webkit/wkwebview/2873260-takesnapshotwithconfiguration

这一切都很棒，除了在设备上使用此方法时我根本无法获取快照。在模拟器中运行该应用程序时，效果非常好。

我在下面添加了两张图片以供比较。两者都是使用 takeSnapshotWithConfiguration:completionHandler: 返回的图像，但其中大部分是空白的。

我试过 web View 的 frame、配置等，但没有成功。

我在想，也许 Simulator 链接到 WebKit 的 macOS 版本，并且不知何故它在那里工作得很好。还有一个问题是 WKSnapshotConfiguration header 似乎也没有在 Swift 中公开，因此我不得不添加一个导入它的桥接 header 。

这里有一个示例项目供所有好奇的人使用:https://github.com/runmad/WebKitSnapshotTest

10 月 20 日更新:

所以这修复了它，但这是一个讨厌的 hack:

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    // webView.scrollView.contentSize == .zero initially, so put in a delay.
    // It still may be .zero, though. In that case we'll just call the
    // delegate method again.
    let deadlineTime = DispatchTime.now() + .milliseconds(300)
    DispatchQueue.main.asyncAfter(deadline: deadlineTime) {
        guard webView.scrollView.contentSize.height > 0 else {
            self.webView(webView, didFinish: navigation)
            return
        }
        // So this works... If you set the .frame of the webView
        // to that of the just loaded .scrollView and then load the
        // same URL again, the resulting .frame and .scrollView will
        // be the same size and the image render on a device will be
        // the correct size.
        guard self.hasLoadedOnce else {
            webView.frame = CGRect(x: self.view.bounds.width, y: 0, width: self.view.bounds.width, height: webView.scrollView.contentSize.height)
            webView.load(URLRequest(url: URL(string: "https://www.apple.com")!))
            self.hasLoadedOnce = true
            return
        }
        webView.snapshotWebView(completionHandler: { (image, _) in
            self.updateWith(image)
        })
    }
}

那么几个问题:

1. (asyncAfter 我已经知道这个并且里面有那个)必须为快照添加延迟，因为 scrollView 仍然可能 .zero 一点点

2. 将 WKWebView 的框架大小设置为正确的 scrollView 大小不起作用

3. 设置框架，然后重新加载 WKWebView，使其达到真实大小即可

03/11 更新:

我的雷达 (35094298) 今天被骗到了 33812691并关闭，这意味着 Apple 至少意识到了这个问题。

Answer 1

swift 4

这是对我有用的(注意:我使用了提供的示例项目的扩展)。

在 webView(didFinish navigation) 里面我用 JS 找到了内容的宽度和高度。然后，我设置了一个全局 rect 变量，以便稍后在按下按钮时将其传递给 snapshot()。在设置约束后包含在以下代码中时，我无法使 snapshot() 工作。

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    // To get the constraints properly set for preparation for the snapshot, the setup must be performed here.
    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: { (width, error) in
                    let contentWidth = width as! CGFloat
                    self.rect = CGRect(x: 0, y: 0, width: contentWidth, height: contentHeight)
                    self.heightConstraint.constant = contentHeight

                    // Because it is known that the web page has completely loaded, it is safe to enable a snapshot to be taken
                    self.takeSnapButton.isEnabled = true
                })
            })
        }
    })
}

对我来说，拍摄快照()必须是一个新 Action ，在我的例子中，一个单独的按钮按下。我的结论是需要设置约束并重新加载 View 以使内容正确调整大小。

    @IBAction func takeSnapButton(_ sender: Any) {
    // It is probably safe to assume that there is definitely an image at this point but to be extra 
    guard let image = self.webView.snapshot(of: self.rect) else { print("An image could not be taken"); return}
}