WKWebView快照在高度超过4100时失效问题求助

核心问题分析 #

1. 代码逻辑错误：原快照回调中使用未赋值的testImage进行绘制，直接导致生成空白图片。
2. WebView渲染空间不足：后台渲染的WebView初始frame高度不足，无法容纳高高度HTML内容，导致快照无法捕获完整内容。
3. 系统快照尺寸限制：部分iOS版本中WKWebView的takeSnapshot对快照高度有隐性限制（接近4100像素，如4096），超过后无法正常渲染。

修复步骤与代码修改 #

1. 修复快照回调的逻辑错误 #

原代码中testImage初始为nil就调用drawInRect:，完全错误，需改用回调返回的snapshotImage。

2. 调整WebView Frame适配HTML高度 #

后台渲染的WebView必须有足够的frame尺寸来容纳完整HTML，否则无法正确渲染内容用于快照。

3. 修复后的完整webView:didFinishNavigation:方法 #

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    [webView evaluateJavaScript:@"document.body.offsetHeight" completionHandler:^(id result, NSError *error) {
        if (!error) {
            CGFloat htmlHeight = [result floatValue];
            CGFloat htmlWidth = self.webviewWidth; // 确保此值为HTML实际渲染宽度
            
            // 调整WebView Frame，确保能容纳完整HTML内容（即使在屏幕外）
            CGRect updatedFrame = webView.frame;
            updatedFrame.size = CGSizeMake(htmlWidth, htmlHeight);
            webView.frame = updatedFrame;
            
            // 配置快照参数
            WKSnapshotConfiguration *snapshotConfig = [[WKSnapshotConfiguration alloc] init];
            snapshotConfig.rect = CGRectMake(0, 0, htmlWidth, htmlHeight);
            snapshotConfig.snapshotWidth = @(htmlWidth);
            
            [webView takeSnapshotWithConfiguration:snapshotConfig completionHandler:^(UIImage * _Nullable snapshotImage, NSError * _Nullable error) {
                if (!error && snapshotImage) {
                    UIImage *finalImage = snapshotImage;
                    
                    // 如需调整图片尺寸，执行以下代码（按需启用）
                    if (!CGSizeEqualToSize(finalImage.size, self.newSize)) {
                        UIGraphicsBeginImageContextWithOptions(self.newSize, NO, UIScreen.mainScreen.scale);
                        [finalImage drawInRect:CGRectMake(0, 0, self.newSize.width, self.newSize.height)];
                        finalImage = UIGraphicsGetImageFromCurrentImageContext();
                        UIGraphicsEndImageContext();
                    }
                    
                    [self saveImage:finalImage];
                } else {
                    NSLog(@"快照生成失败：%@", error?.localizedDescription ?: "未知错误");
                }
            }];
        }
    }];
}

4. 补充：WebView必须加入视图层级 #

原loadWebView方法中创建WebView后未添加到视图层级，导致渲染异常，需补充：

- (void) loadWebView
{
    // x origin = 2000, to render off screen.
    view = [[WKWebView alloc] initWithFrame:CGRectMake(2000, 0, webviewWidth, webviewHeight) configuration:[self getWKWebViewConfiguration]];
    view.UIDelegate = self;
    view.navigationDelegate = self;
    // 必须添加到视图层级才能正常渲染
    [self.view addSubview:view];
    [view loadHTMLString:reportString baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]];
}

进阶方案：分段快照（应对系统高度限制） #

若调整Frame后仍存在高度限制（如iOS旧版本），可将HTML分段快照后拼接：

- (void)takeMultiPartSnapshotWithWebView:(WKWebView *)webView totalHeight:(CGFloat)totalHeight width:(CGFloat)width {
    const CGFloat maxSegmentHeight = 4096; // 根据测试调整最大单段高度
    NSInteger segmentCount = ceil(totalHeight / maxSegmentHeight);
    
    NSMutableArray *segmentImages = [NSMutableArray array];
    dispatch_group_t snapshotGroup = dispatch_group_create();
    
    for (NSInteger i = 0; i < segmentCount; i++) {
        dispatch_group_enter(snapshotGroup);
        
        CGFloat segmentY = i * maxSegmentHeight;
        CGFloat segmentHeight = MIN(maxSegmentHeight, totalHeight - segmentY);
        
        WKSnapshotConfiguration *snapshotConfig = [[WKSnapshotConfiguration alloc] init];
        snapshotConfig.rect = CGRectMake(0, segmentY, width, segmentHeight);
        snapshotConfig.snapshotWidth = @(width);
        
        [webView takeSnapshotWithConfiguration:snapshotConfig completionHandler:^(UIImage * _Nullable snapshotImage, NSError * _Nullable error) {
            if (snapshotImage) {
                [segmentImages addObject:snapshotImage];
            }
            dispatch_group_leave(snapshotGroup);
        }];
    }
    
    dispatch_group_notify(snapshotGroup, dispatch_get_main_queue(), ^{
        // 拼接所有分段图片
        UIGraphicsBeginImageContextWithOptions(CGSizeMake(width, totalHeight), NO, UIScreen.mainScreen.scale);
        CGFloat currentY = 0;
        for (UIImage *segImage in segmentImages) {
            [segImage drawInRect:CGRectMake(0, currentY, width, segImage.size.height)];
            currentY += segImage.size.height;
        }
        UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        
        [self saveImage:finalImage];
    });
}

其他检查项 #

• 确保saveImage方法无错误，比如保存时使用正确的图片格式（如PNG避免压缩失真）。
• 验证webviewWidth与HTML实际渲染宽度一致，避免缩放导致内容截断或空白。

内容的提问来源于stack exchange，提问作者cloud