iOS｜利用滑动窗口思想解决长截图问题

之前在我的个人笔记站点内发了滑动窗口解决长截图问题的博客，但是那次并没有对问题原因进行深究。这次借着新站点刚创立，急需内容的机会，深入探究一下 UIView 截图的限制，把滑动窗口思想重新总结发一下。

探究 UIView 截图尺寸限制

常用的截图方法有两个：UIView 的- (BOOL)drawViewHierarchyInRect:(CGRect)rect afterScreenUpdates:(BOOL)afterUpdates 以及 CALayer 的 - (void)renderInContext:(CGContextRef)ctx;。

我在 demo 里对两种截图方式分别测试了最多支持绘制多大的 UIView 尺寸。测试机型分别为 iPhone 13 mini，iPad mini (6th Gen)。

从测试结果来看，使用 renderInContext 方法绘制 UIView 长截图是比较危险的，一不小心就会把 App 干崩了，还会导致系统热重启。使用 drawViewHierarchyInRect方法绘制长截图比较安全些，但它支持的 UIView 最大绘制尺寸比前者要小很多。

绘制成功时的 demo App 显示效果及保存到相册的图片信息：

drawViewHierarchyInRect方法如果绘制失败了，context 给到的 UIImage 是空白的，但尺寸是对的。

在不同的机型上，绘制支持的最大视图尺寸是不同的。iPad mini 机型上的 4096 * 4096 这个精准的尺寸限制我是在 http://iosres.com/ 网站上找到的，再额外超出 1 pt 都不行。

利用滑动窗口思想解决长截图问题

从上面的分析结果来看，UIView 在单次绘制截图时，是存在一个最大尺寸限制的，且这个限制和机型有关。

既然单次绘制有限制，那把长图分多次绘制就可以了💡

UIScrollView 在drawViewHierarchyInRect的时候，只会绘制 bounds 区域的内容，也就是其可视区域的内容。利用这一点，我们可以将 UIScrollView 的 bounds 视为一个在其 content 上从上至下、每次滑动 bounds 高度的滑动窗口，把目标视图添加到 UIScrollView 上，作为其子视图。每次滑动绘制完一段图像，就将输出图和先前绘制的图拼接在一起，并设置一下 contentOffset 模拟窗口滑动，或者通过改变目标视图的 frame 实现模拟窗口滑动的效果。

// 分段绘制，最后拼接长图
UIImage *snapShotImage = [self drawImageFromView:mainView];

/// 将目标 view 绘制成图片
- (nullable UIImage *)drawImageFromView:(UIView *)view {
    // 图片宽度
    CGFloat imageWidth = view.frame.size.width;
    // 图片高度
    CGFloat totalHeight = view.frame.size.height;
    // 分段数
    NSInteger pieces = (NSInteger)ceil(totalHeight / PIECE_HEIGHT);
    // 剩余未绘制部分的高度
    CGFloat remainHeight = totalHeight;
    UIImage *finalImage;

    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, imageWidth, PIECE_HEIGHT)];
    [scrollView addSubview:view];
    scrollView.contentOffset = CGPointZero;
    scrollView.contentInset = UIEdgeInsetsZero;
    [scrollView layoutSubviews];

    for (int i = 0; i < pieces; i++) {
        // 当前分段的绘制高度。每次取 300
        CGFloat currentPieceHeight = remainHeight >= PIECE_HEIGHT ? PIECE_HEIGHT : remainHeight;
        UIGraphicsBeginImageContextWithOptions(CGSizeMake(imageWidth, currentPieceHeight), NO, 0.0);
        [scrollView drawViewHierarchyInRect:scrollView.bounds afterScreenUpdates:YES];
        UIImage *pieceImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();

        if (pieceImage == nil) {
            return nil;
        }

        if (finalImage == nil) {
            finalImage = pieceImage;
        } else {
            finalImage = [self mergeImageWithTopImage:finalImage bottomImage:pieceImage];
        }

        remainHeight = remainHeight - currentPieceHeight;

        view.frame = CGRectMake(0, -totalHeight + remainHeight, imageWidth, totalHeight);   // 这里其实是在模拟目标 view 在 UIScrollView 内部滚动特定距离的效果。其实也可以通过设置 UIScrollView 的 contentOffset 来达到这一效果，会更容易理解一些
        [scrollView setNeedsDisplay];
        [scrollView layoutSubviews];
    }

    return finalImage;
}

/// 将上下两个图片拼接成一个图片
- (UIImage *)mergeImageWithTopImage:(UIImage *)topImage bottomImage:(UIImage *)bottomImage {
    CGFloat width = topImage.size.width;
    CGFloat totalHeight = topImage.size.height + bottomImage.size.height;
    CGSize resultSize = CGSizeMake(width, totalHeight);

    UIGraphicsBeginImageContextWithOptions(resultSize, NO, 0.0);
    [topImage drawInRect:CGRectMake(0, 0, width, topImage.size.height)];
    [bottomImage drawInRect:CGRectMake(0, topImage.size.height, width, bottomImage.size.height)];
    UIImage *resultImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return resultImage;
}

本作品为作者原创文章，采用 CC BY-NC-SA 4.0 进行许可。普通转载请附上原文出处链接及本许可声明；如有商业转载需求，请联系作者。