将 UIWebView 渲染到 ImageContext

Rendering a UIWebView into an ImageContext(将 UIWebView 渲染到 ImageContext)

问题描述

我正在尝试捕获 UIWebView 的内容，包括对用户不可见的内容.即整个网页，即使用户只看顶部.

I am trying to capture the contents of a UIWebView including that which is not visible to the user. i.e. The whole web page even though the user is only looking at the top.

环顾四周，我发现捕获 UIView 的最佳方法是检索其层并使用 renderInContext.

Looking around I found the best way to capture a UIView is to retrieve its layer and use renderInContext.

然而，UIWebView 似乎在使用它自己的 CALayer 实现，它的行为更像 CATiledLayer，尽管它仍然声称是标准的 CALayer.当我调用 renderInContext 时，我只得到网页的一部分，最多向下 940 像素，而不是整个页面.

However, UIWebView seems to be using its own CALayer implementation which is behaving a lot more like CATiledLayer, although it is still claiming to be a standard CALayer. When I call renderInContext I only get one portion of the web page, up to 940px down, as opposed to the whole page.

有没有人有任何想法:强制 UIWebView 向下滚动另一个 940 像素(显然这远非理想)，或者当我问它时告诉它支持 WebView 的任何种类的 CALayer 来呈现其所有内容到.

Has anyone got any ideas on how to either: force the UIWebView to scroll down another 940px (obviously that is far from ideal) or tell whatever breed of CALayer it is backing the WebView to render all of its content when I ask it to.

干杯

我应该添加当前更改 webview 的框架以适合通过 javascript 检索的页面的大小.

I should add that currently change the frame of the webview to fit the size of the page retrieved through javascript.

推荐答案

我发布了一个应用程序(Web2Pic) 这样做，请相信我 UIGraphicsBeginImageContext(webView.frame.size);除了从我们的 UIWebView 中的可见区域获取一个小图像之外，什么也做不了；-(

I've released an app (Web2Pic) doing that, and please trust me that UIGraphicsBeginImageContext(webView.frame.size); can do nothing except getting a small image from the visible area in our UIWebView ;-(

正确的方法有点复杂，但它确实有效:

The right way is a bit complex but it just works:

1.在我们的 UIWebView 中使用 JavaScript 来获取这些浮点值:

1.Use JavaScript in our UIWebView to get these float values:

   //Whole page size in HTML coordinate
   document.body.scrollWidth
   document.body.scrollHeight
   //UIWebView visible size in HTML coordinate
   window.innerWidth
   window.innerHeight

2.现在我们可以将整个页面切割"成几十个 UIWebView 大小的小块.然后我们可以单独捕获每个小块并将它们保存到我们的缓存中.我通过计算页面偏移来实现这一点，并使用 UIGraphicsBeginImageContext(webView.frame.size); 来获取图像数组.另外，你应该将图像数组缓存到文件系统中，否则应用程序最终会崩溃！

2.Now we can 'cut' the whole page into dozens of UIWebView-sized small pieces. Then we can capture every small pieces individually and save them into our Cache. I implemented this by calculating page-offsets and use UIGraphicsBeginImageContext(webView.frame.size); to get a array of images. In addition, you should cache the image array into the file system, or the app will eventually crash!

3.当我们最终得到所有小块时，我们可以启动一个全分辨率上下文:UIGraphicsBeginImageContext(CGSizeMake(document.body.scrollWidth,document.body.scrollHeight));

3.When we finally got all the small pieces, we can start a full-resolution context: UIGraphicsBeginImageContext(CGSizeMake(document.body.scrollWidth,document.body.scrollHeight));

4.根据坐标将每个小图像渲染到大上下文中.并且小心角落，每行/行中的最后一张图片可能不是完整的图片.

4.Render every small images into the big context based on the coordinates. And be careful to the corners, the last image in every line/row may not be a full image.

5.还有一步:保存大图.请勿将其保存到相册中，因为 iOS 会自动降低相册中图片的分辨率.相反，我们可以将其保存到文件系统中并启用应用的 iTunes 文件共享 支持，甚至可以编写一个简单的应用内照片管理器.

5.There is still one step left: saving the big image. Do not save it into the PhotoAlbum, because iOS will automatically cut down the resolution of images in the album. Instead, we can save it into the file system and enable the app's iTunes File Share support, or even write a simple in-app photo manager.

希望这些可以帮助;-)

Hope these can help ;-)

一朝峰姬

这篇关于将 UIWebView 渲染到 ImageContext的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！