获取UIWebView内容并将其转换为图像

Question

我正在使用UIWebView。我调用Web服务来获取内容。在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>

这只是一个例子。我可能会得到＆＃39; n＆＃39;以上类型的＆＃39; div＆＃39;标签可能每个都有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:实际上并没有加载字符串。它会在代理webViewDidFinishLoad:(UIWebView *)webView

中执行大量内容然后回调

2. 在呈现HTML之前，您必须保留VC。否则，VC将在回叫代理webViewDidFinishLoad:之前处理。在我的例子中，我使用singleton对象来保留它。

解决方案：

1. 创建VC的单个对象。
2. 设置webView.delegate = VC
3. 在webViewDidFinishLoad:(UIWebView *)webView
中实施图像渲染
4. 您可以存储回调或委托或其他内容，以通知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;
}