ios - 获取UIWebView内容并转为图片

Question

我正在使用 UIWebView。我调用网络服务来获取内容。在 Web 服务响应中，我得到如下 HTML 字符串:

<div style='text-align: center;'> <div style=' display: inline-block; width: 120px;height: 120px; text-align:center; '; ><img  src='http://assetdetailsdemo.azurewebsites.net/QRUpload/4774.jpg' style='height:100px; width:100px' /><br /><div>4774</div></div> <br /><br /></div>

这只是一个例子。我可能会得到 'n' 个上述类型的 'div' 标签，每个标签可能有 1 张图片。我使用以下方法在 UIWebView 中加载了它:

[_webView loadHTMLString:_HTMLStr baseURL:[[NSBundle mainBundle] bundleURL]];

其中 _HTMLStr 包含上述 HTML 字符串。
我的主要问题是我需要获取 UIWebView 的孔内容并需要生成图像。 我已经尝试使用下面的代码来获取图像:

UIGraphicsBeginImageContext(_webView.bounds.size);
[_webView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

此方法用于将UIWebView 的内容转换为UIImage。但是，我想要一段代码，它允许我只从 webview 的内容生成图像。或者我们可以说我正在寻找另一种获取图像的方法。

Answer 1

所以我在这里遇到了同样的问题。经过一段时间的努力，我发现:

1. loadHTMLString:baseURL: 实际上不加载字符串。它会执行很多事情，然后在委托(delegate) webViewDidFinishLoad:(UIWebView *)webView

中回调

2. 您必须保留 VC，直到它呈现 HTML。否则，VC 将在回调委托(delegate) webViewDidFinishLoad: 之前被处理掉。就我而言，我使用单例对象来保留它。

解决方法:

1. 创建VC的单例对象。
2. 设置 webView.delegate = VC
3. 在webViewDidFinishLoad:(UIWebView *)webView中实现图片渲染
4. 您可以存储回调或委托(delegate)或其他东西来通知 webView 已完全呈现。

编辑:

因为 loadHTML 实际上不会立即加载，而是执行某些操作(不确定它做了什么......)然后在 webViewDidFinishLoad:(UIWebView *)webView，因此您需要等到该方法被调用。

因此，您在 VC(或任何对象，取决于您)中声明 webView 和 callbackBlock:

@interface MyObject () <UIWebViewDelegate>

@property (strong, nonatomic) UIWebView *webView;
@property (strong, nonatomic) void(^callbackBlock)(UIImage *generatedImage);

@end

所以当你调用 generateImageFromHTML:(NSString *)html callback:(callbackBlock)callback 时，它会等到图像完全生成后再回调。

您需要一些东西来保留 webView 和 callbackBlock。就我而言，我只是使用单例来保留它。

+ (instanceType)loadHTML:(NSSTring *)html callBack:(callbackBlock)callback {
    static dispatch_once_t onceToken;
    static MyObject *instance;
    // Keep reference
    dispatch_once(&onceToken, ^{
        instance = [MyObject new];

        instance.webView = [UIWebView new];
        instance.webView.delegate = instance;
        instance.webView.scalesPageToFit = YES;
    });

    // Perform load here
    [instance.webView loadHTMLString:html baseURL: [[NSBundle mainBundle] bundleURL]];

    // Wait until done
    instance.callbackBlock = callback;
    return instance;
}

接下来是实际从 htmlContent 图像创建图像并返回它:

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    if (self.callbackBlock) {
        self.callbackBlock([self imageFromWebView:webView]);
    }
}

- (UIImage *)imageFromWebView:(UIWebView *)view
{
    // Adjust the image size to fit webContent
    // get the width and height of webpage using js (you might need to use another call, this doesn't work always)
    // CGFloat contentWidth = [view stringByEvaluatingJavaScriptFromString:@"document.getElementsByClassName(\"content\")[0].offsetWidth"].floatValue;
    // CGFloat contentHeight = [view stringByEvaluatingJavaScriptFromString:@"document.getElementsByClassName(\"content\")[0].offsetHeight"].floatValue;
    CGSize documentSize = CGSizeMake(contentWidth, contentHeight);

    view.frame = CGRectMake(0, 0, contentWidth, contentHeight);

    //make the snapshot
    UIGraphicsBeginImageContext(documentSize);
    [view.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}