前言
同时按下 home 键和电源键，咔嚓一声，就得到了一张手机的截图，这操作想必 iphone 用户再熟悉不过了。我们作为研发人员，面对的是一个个的 view，那么该怎么用代码对 view 进行截图呢？
这篇文章主要讨论的是如何在包括 uiwebview 和 wkwebview 的网页中进行长截图，对应的示例代码在这儿：https://github.com/vernonvan/ppsnapshotkit （） 。
uiwebview 截图
对 uiwebview 截图比较简单，renderincontext 这个方法相信大家都不会陌生，这个方法是 calayer 的一个实例方法，可以用来对大部分 view 进行截图。我们知道，uiwebview 承载内容的其实是作为其子 view 的 uiscrollview，所以对 uiwebview 截图应该对其 scrollview 进行截图。具体的截图方法如下：
我要评论
- (void)snapshotforscrollview:(uiscrollview *)scrollview
{
// 1. 记录当前 scrollview 的偏移和位置
cgpoint currentoffset = scrollview.contentoffset;
cgrect currentframe = scrollview.frame;
scrollview.contentoffset = cgpointzero;
// 2. 将 scrollview 展开为其实际内容的大小
scrollview.frame = cgrectmake(0, 0, scrollview.contentsize.width, scrollview.contentsize.height);
// 3. 第三个参数设置为 0 表示设置为屏幕的默认缩放因子
uigraphicsbeginimagecontextwithoptions(scrollview.contentsize, yes, 0);
[scrollview.layer renderincontext:uigraphicsgetcurrentcontext()];
uiimage *snapshotimage = uigraphicsgetimagefromcurrentimagecontext();
uigraphicsendimagecontext();
// 4. 重新设置 scrollview 的偏移和位置，还原现场
scrollview.contentoffset = currentoffset;
scrollview.frame = currentframe;
}
wkwebview 截图
虽然 wkwebview 里也有 scrollview，但是直接对这个 scrollview 截图得到的是一片空白的，具体原因不明。一番 google 之后可以看到好些人提到 drawviewhierarchyinrect 方法， 可以看到这个方法是 ios 7.0 开始引入的。官方文档中描述为：
renders a snapshot of the complete view hierarchy as visible onscreen into the current context.
注意其中的 visible onscreen，也就是将屏幕中可见部分渲染到上下文中，这也解释了为什么对 wkwebview 中的 scrollview 展开为实际内容大小，再调用 drawviewhierarchyinrect 方法总是得到一张不完整的截图（只有屏幕可见区域被正确截到，其他区域为空白）。
不过，这样倒是给我们提供了一个思路，可以将 wkwebview 按屏幕高度裁成 n 页，然后将 wkwebview 一页一页的往上推，每推一页就调用一次 drawviewhierarchyinrect 将当前屏幕的截图渲染到上下文中，最后调用 uigraphicsgetimagefromcurrentimagecontext 从上下文中获取的图片即为完整截图。
核心代码如下（代码为演示用途，完整代码请从这里 （） 查看)：
- (void)snapshotforwkwebview:(wkwebview *)webview
{
// 1
uiview *snapshotview = [webview snapshotviewafterscreenupdates:yes];
[webview.superview addsubview:snapshotview];
// 2
cgpoint currentoffset = webview.scrollview.contentoffset;
...
// 3
uiview *containerview = [[uiview alloc] initwithframe:webview.bounds];
[webview removefromsuperview];
[containerview addsubview:webview];
// 4
cgsize totalsize = webview.scrollview.contentsize;
nsinteger page = ceil(totalsize.height / containerview.bounds.size.height);
webview.scrollview.contentoffset = cgpointzero;
webview.frame = cgrectmake(0, 0, containerview.bounds.size.width, webview.scrollview.contentsize.height);
uigraphicsbeginimagecontextwithoptions(totalsize, yes, uiscreen.mainscreen.scale);
[self drawcontentpage:0 maxindex:page completion:^{
uiimage *snapshotimage = uigraphicsgetimagefromcurrentimagecontext();
uigraphicsendimagecontext();
// 8
[webview removefromsuperview];
...
}];
}
- (void)drawcontentpage(nsinteger)index maxindex:(nsinteger)maxindex completion:(dispatch_block_t)completion
{
// 5
cgrect splitframe = cgrectmake(0, index * cgrectgetheight(containerview.bounds), containerview.bounds.size.width, containerview.frame.size.height);
cgrect myframe = webview.frame;
myframe.origin.y = -(index * containerview.frame.size.height);
webview.frame = myframe;
// 6
[targetview drawviewhierarchyinrect:splitframe afterscreenupdates:yes];
// 7
if (index < maxindex) {
[self drawcontentpage:index + 1 maxindex:maxindex completion:completion];
} else {
completion();
}
}
代码注意项如下（对应代码注释中的序号）：
注意：我们的截图方法中有对 webview 的 frame 进行操作，如果其他地方如果有对 frame 进行操作的话，是会影响我们截图的。所以在截图时应该禁用掉其他地方对 frame 的改变，就像这样：
- (void)layoutwebview
{
if (!_iscapturing) {
self.wkwebview.frame = [self frameforwebview];
}
}
结语
当前 wkwebview 的使用越来越广泛了，我随意查看了内存占用：打开同样一个网页，uiwebview 直接占用了 160 mb 内存，而 wkwebview 只占用了 40 mb 内存，差距是相当明显的。如果我们的业务中用到了 wkwebview 且有截图需求的话，那么还是得老老实实完成的。
最后，本文对应的代码在这儿：https://github.com/vernonvan/ppsnapshotkit（）
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。
如对本文有疑问， 点击进行留言回复！！
牛客编程巅峰赛S1第6场 - 黄金&钻石&王者题解
纵横字谜的答案 Crossword Answers, ACM/ICPC World Finals 1994, UVa232
HDU - 5880 Family View (AC自动机修改母串)
iOS14Beta3续航怎么样 iOS14Beta3续航能力介绍
网友评论