在Swift中对所有Webview进行全屏截图

Question

有人知道如何使用Swift代码对所有Web视图进行全屏截图（不是屏幕！因为WebView很长，我们必须滚动才能查看所有内容），并通过UIActivityViewController共享吗？

- Hassan Taleb

Answer 1

当网页视图加载完成后，请尝试以下代码：

编辑：在模拟器中运行此代码，然后检查您的文档应用程序目录中的screenshot.jpeg文件。

class ViewController: UIViewController,UIWebViewDelegate {

let fileDirectory = NSSearchPathForDirectoriesInDomains(
    .DocumentDirectory, .UserDomainMask, true)

@IBOutlet weak var webView: UIWebView!

override func viewDidLoad() {


    var urlPath = "http://www.bbc.com/"
    let requestUrl = NSURL(string: urlPath)
    let request = NSURLRequest(URL: requestUrl!)
    webView.loadRequest(request)
    webView.delegate = self

}

func webViewDidFinishLoad(webView: UIWebView) {


    if (!webView.loading){

        var webViewFrame = webView.frame

        webView.frame = CGRectMake(webViewFrame.origin.x, webViewFrame.origin.y, webView.scrollView.contentSize.width, webView.scrollView.contentSize.height)

        UIGraphicsBeginImageContextWithOptions(webView.scrollView.contentSize, false, 0);
        self.webView.layer.renderInContext(UIGraphicsGetCurrentContext())
        var image:UIImage = UIGraphicsGetImageFromCurrentImageContext();
        var imageData = UIImageJPEGRepresentation(image, 0.7)
        var currentFileName = "screenshot.jpeg"
        var imageFilePath = fileDirectory[0].stringByAppendingPathComponent(currentFileName)
        var imageFileURL = NSURL(fileURLWithPath: imageFilePath)
        imageData.writeToURL(imageFileURL!, atomically: false)
        webView.frame = webViewFrame
    }
}

}

- Zell B.

---

我在这里遇到了一个错误：fileDirectory[0]。 无论如何，我尝试了您的代码，像这样：var webViewFrame = webView.frame
webView.frame = CGRectMake(webViewFrame.origin.x, webViewFrame.origin.y, webView.scrollView.contentSize.width, webView.scrollView.contentSize.height) UIGraphicsBeginImageContextWithOptions(webView.scrollView.contentSize, false, 0); self.webView.layer.renderInContext(UIGraphicsGetCurrentContext())var image:UIImage = UIGraphicsGetImageFromCurrentImageContext();webView.frame = webViewFrame但是截图并不是整个webview的，就像一张屏幕截图。 - Hassan Taleb

关于错误，请使用以下代码：var fileDirectory = NSSearchPathForDirectoriesInDomains(.DocumentDirectory, .UserDomainMask, true)。关于截图，您确定webview已经完全加载了吗？我刚刚尝试了不同的网站，一切正常。 - Zell B.

关于第一个问题：我们现在需要编辑它。变量imageFileURL应该为NSURL(fileURLWithPath: imageFilePath)。关于第二个问题：是的，我确定，因为WebView是本地的（在我的项目中有HTML文件）。在我的UIActivityViewController中，我调用了image（UIImage），而不是另一个变量。 - Hassan Taleb

请注意：此结果不像屏幕截图！因为当我选择另一个长的HTML页面时，所有内容都会出现，除了页面底部缺失的底部部分（与链接中图像的尺寸相同）。 请注意：白色顶部栏的尺寸=缺失的底部栏的尺寸 @zellb - Hassan Taleb

我能够转换成图片，但只有可见部分会出现，其余部分显示为白色。我甚至尝试设置更高的webframe高度值@HassanTaleb，但结果相同。 - Ajay nath

Answer 2

使用 Swift 5 中的 WKWebView 的解决方案

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

        let configuration = WKSnapshotConfiguration()
        configuration.rect = CGRect(origin: .zero, size: (self.webView.scrollView.contentSize))

        webView.takeSnapshot(with: configuration) {image, error in
            if let image = image {
                self.saveImage(imageName: "snapshot.jpg", image: image)
            }
        }
    }
}

- Bill Chan

---

太好了！你的代码运行成功了！但是有一个问题：如果你向下滚动 WebView，快照会不正确。 - Fast

我在 iOS 13+ 上得到了空白图像。在低版本设备上运行正常。 - Ajay nath

已使用XCode 11.5进行检查，此答案不再捕获整个页面高度。 - Bill Chan

已添加已接受答案的hack（将webview调整为webView.scrollView.contentSize.height的高度）有效。 - Bill Chan

这在我的iOS 13.3上有效，但在13.4和12.4.3上无效。 - Vikky