将UIWebView转换为ImageContext [英] Rendering a UIWebView into an 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我只得到一个部分的网页，高达940px下来，而不是整个页面。

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向下滚动另一个940px（显然是远离理想）或告诉任何种类的CALayer它支持WebView渲染其所有内容，当我问。

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.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.还有一个步骤左：保存大图像。 不要将其保存到PhotoAlbum 中，因为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 ;-)

Yichao峰吉

这篇关于将UIWebView转换为ImageContext的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！