iOS 原生和H5结合 WKWebView的长截图问题

前言

        最近的一版,有很多....泯灭人性的地方.遇到了一些之前没有遇到的问题,也有了一些自己的体会,先说一个跟技术分享没有关系的经验问题: 一定不要为了省代码而作过多的逻辑判断(主要是过不了自己心里的一关),尤其是在周期紧的情况下,无论是写还是review都是一个大问题.即使想达到节省代码量的目的.这些逻辑判断最好写在model里.不要在页面里做过多的展示判断.否则....你的下场就和我一样.....

        言归正传,WKWebView的截图就是一个坑,你想躲避他,回头便还是会遇到他.其实如果只是单纯的WKWebView的截图相比较之下相对容易一点,读了前辈的文章基本上你有两条路可以走: 1.将WKWebView的contentOffSet进行设置一屏一屏的截图,然后再拼接起来假装达到长截图的效果; 2.将WKWebView放在一个父视图上然后通过更改这个父视图的frame 的y来截的当前父视图的截图,然后再一屏一屏的截下来.假装达到长截图的效果.....于是乎我不信其邪,走上了一条长达1天半的歪路.不过还是有收获,现将前辈的网址贴过来,供大家瞻仰:我只是想要截个屏.而且和很多我看过的解决blog不一样的是前辈是个有始有终的人.... 他还有一个截屏续,完美的解决了我的一些困惑...并非问题.

        为了能够方便大家,还得去前辈那里看具体的技术点.我简单的形容一下我的理解,和进行探索的过程.

场景描述   

        在一个tableView 下我需要接上一个webView.我有三条路: 

1. 放在tableView的tableFooterView上,限制webView的滑动整体让tableView滑动来弥补.当然后期会解决手势冲突
2. 放在tableView的Cell中
3. 将tableView作为webView的头视图,然后设置webView的contentInset,之前的blog中有相关操作

        然后我选择了1

主要矛盾   

        长截图.....一个原生加webView的长截图,一个webView大部分时间在屏幕外的长截图....一个要截tableView 还要截一个放在他footer里的WKWebView.....对于初出茅庐的我....很是塞心...之前项目里这种部分都是请求接口得到image....不过鉴于周期短还是不给别人添麻烦了...而且那样还得一个个生成....其实已经与自己的想法背离.

        于是看到了前辈的blog,前辈有个开源库SwViewCapture,虽然...我...下下来...直接运行截图WKWebView的时候直接就崩溃了...但是其思路让我豁然开朗,茅塞顿开.柳暗花明,拨云见雾.....,这个开源库里有关于普通view,tableView,webView以及WKWebView的截图的所有例子.不过他的尝试办法貌似有问题.他的主要思路有下面五个:

1. 将WKWebView的frame拉长和ContentSize的高度保持一致, 然后截图
2. 将WKWebView的frame拉长和ContentSize的高度一致, 然后通过WKWebView的snapshotViewAfterScreenUpdates获取的view进行截图
3. 对WKWebView内部的WKContentView直接截图
4. 将WKScrollView对应的Screen进行拉伸, 然后对WKWebView进行等价拉伸, 再截图
5. 使用私有API_snapshotRect:intoImageOfWidth:completionHandler

首先哈,前辈对于1-3的办法直接尝试得到的结论是截屏到空白,或者只有屏幕部分,对此我表示不认可,因为有的系统下我就是直接1方法达到的,至于其他的几种方法除了5,我都有涉及部分所以重点讲我是怎么实现的.

这个坑很大.希望大家能够很好地读完,

在我经过测试之后发现该截图与iOS系统版本有关

在iOS最新的11.0以后的话整体对WKWebView的scrollView进行截图则能够截全图片.然后再和tableView的图片进行拼接即可.

//iOS 11.0 以上的系统用这个方法