iOS-长截图（学习记录）

2023-09-17 18:14

短信预约 -IT技能 免费直播动态提醒

前言

长截图 —— 也就是可以截到超出屏幕的长图。在实现长图之前，我们先要了解一下iOS的绘制普通截图操作。在此基础上，来实现长截图。

iOS — 绘制截图

 UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale); [self.view.layer renderInContext:UIGraphicsGetCurrentContext()]; UIImage *img = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext();

UIGraphicsBeginImageContextWithOptions 该函数开始创建图片上下文，它有三个参数：
size：想要渲染图片的大小尺寸
opaque：所要创建图片的背景是否是不透明的。YES 背景则为黑色，NO 背景则为透明。
scale：所要创建图片的缩放比例。如果设置为0 ，则和[UIScreen mainScreen].scale效果一样，随着手机屏幕分辨率改变。
调用方法renderInContext：将view的layer渲染到当前的绘制的上下文中。（Renders the layer and its sublayers into the specified context.）
UIGraphicsGetImageFromCurrentImageContext：基于当前位图的上下文返回图像。
UIGraphicsEndImageContext：从堆栈顶部删除当前基于位图的图形上下文。

以上就是iOS的截图代码了。但是对于WKwebVIew（长图）来说，这个代码截不了完整的图片。因为WKwebView考虑到性能问题，并不会加载用户看不到的地方，所以会导致截图不完整。

WKWebView长截图

思路

这边先来说一下思路吧，我也是参考了网上很多实现方法总结的。我们可以看到WKWebView中有个子视图是WKScrollView。那么我们就可以通过拖动ScrollView来加载内容，与此同时截下图片。当ScrollView拖动到底之后，将全部截图拼接起来即可。

PS：当页面有悬浮栏时就会出现问题，在每一张截图中均会出现悬浮栏。目前我没有想到可以解决这个问题的方法，但思路大概是让WKwebVIew全部加载出来，然后进行截图。

实现

外部方法

/// 对WKWebView进行长截图（没有规避H5悬浮栏）/// @param webView 需要进行截图的webView/// @param completionHandler 截图完成回调 - (void)snapshotForWKWebView:(WKWebView *)webView CaptureCompletionHandler:(void (^)(UIImage * _Nonnull))completionHandler {    //1.添加遮罩层    UIView *snapshotView = [webView snapshotViewAfterScreenUpdates:YES];    snapshotView.frame = webView.frame;    [webView.superview addSubview:snapshotView];    //2.初始化数组    self.imgArr = [NSMutableArray array];    //3.进行截图操作    CGPoint savedCurrentContentOffset = webView.scrollView.contentOffset;    webView.scrollView.contentOffset = CGPointZero;    [self createSnapshotForWKWebView:webView offset:0.0 remainingOffset_y:webView.scrollView.contentSize.height comletionBlock:^(UIImage *snapshotImg) {        webView.scrollView.contentOffset = savedCurrentContentOffset;        [snapshotView removeFromSuperview];        completionHandler(snapshotImg);    }];}

为了让用户看不到我们截图滚动的操作，这里使用snapshotViewAfterScreenUpdates 方法来实现屏幕快照进行遮盖。
初始化imgArr数组，之后用来存放每一部分截图。
保存当前WKScrollView.contentOffset以便截图操作结束后还原“案发现场”。
将WKScrollView.contentOffset设置为CGPointZero，调用截图方法开始截图。

截图操作方法

/// 绘制WKWebView长截图/// @param webView 所需要截图的WebView/// @param offset_y 当前scollView的y偏移量/// @param reOffset_y 剩余scollView的y偏移量/// @param completeBlock 回调块- (void)createSnapshotForWKWebView:(WKWebView *)webView offset:(float)offset_y remainingOffset_y:(float)reOffset_y comletionBlock:(void(^)(UIImage *snapshotImg))completeBlock{    //判断scrollView是否已经滚动到底    if (reOffset_y>0) {        //设置        [webView.scrollView setContentOffset:CGPointMake(0, offset_y) animated:NO];        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(),^{            //对页面进行截图操作            UIGraphicsBeginImageContextWithOptions(webView.frame.size, YES, [UIScreen mainScreen].scale);            [webView.layer renderInContext:UIGraphicsGetCurrentContext()];            UIImage * img = UIGraphicsGetImageFromCurrentImageContext();            UIGraphicsEndImageContext();            //将截图添加进数组            [self.imgArr addObject:img];            //修改offsetY偏移量            CGFloat newOffset_y = offset_y + webView.scrollView.frame.size.height;            CGFloat newReOffset_y = reOffset_y - webView.frame.size.height;            [self createSnapshotForWKWebView:webView offset:newOffset_y remainingOffset_y:newReOffset_y comletionBlock:completeBlock];                    });    }else {        //合成截图为最终截图        UIView * containerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, webView.frame.size.width, webView.scrollView.contentSize.height)];        CGFloat originYOfImgView = 0;        for (int i = 0; i<self.imgArr.count; i++) {            UIImageView * imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, originYOfImgView, webView.frame.size.width, webView.frame.size.height)];            UIImage * img = self.imgArr[i];            imgView.image = img;            originYOfImgView += webView.frame.size.height;            [containerView addSubview:imgView];        }        //添加合成视图        [webView.superview addSubview:containerView];        //处理最终合并截图        UIGraphicsBeginImageContextWithOptions(containerView.frame.size, YES, [UIScreen mainScreen].scale);        [containerView.layer renderInContext:UIGraphicsGetCurrentContext()];        UIImage * img = UIGraphicsGetImageFromCurrentImageContext();        UIGraphicsEndImageContext();        //移除合成视图        [containerView removeFromSuperview];        //返回截图        if (completeBlock) {            completeBlock(img);        }    }}