以前使用UIWebview时,想截取整个页面,可以调整内部scrollView的frame,之后调用 scrollView的layer的 render 方法,很方便。

但是在WKWebView上,行不通。

我觉得以前的UIWebview其实是把整个页面都渲染在内存中,只是我们看不到。而WKWebView为了优化内存,只渲染WKWebView的Frame大小的内容。

所以想用WKWebview截取整个页面,必须放大WKWebview的frame。

 webView.frame = CGRect(x: , y: , width: webView.scrollView.frame.size.width, height: webView.scrollView.contentSize.height);

改变了frame之后,我们就可以利用scrollView.layer.render 去渲染整个页面了。

但是这时候又出现了另一个问题:  渲染网页是需要时间的,把webview的frame扩大后,我们不知道什么时候,系统完成了渲染。比如下面这个例子:

@IBAction func takeScreenshot(){

        webView.frame = CGRect(x: , y: , width: webView.scrollView.frame.size.width, height: webView.scrollView.contentSize.height);

            let scrollView = self.webView.scrollView

            UIGraphicsBeginImageContextWithOptions(self.webView.scrollView.contentSize,false, UIScreen.main.scale)

            scrollView.layer.render(in: UIGraphicsGetCurrentContext()!)

            let image = UIGraphicsGetImageFromCurrentImageContext()

            let pngData = UIImagePNGRepresentation(image!);

            let dstPath = NSHomeDirectory()+"/Documents/test.png"
let dstUrl = URL(fileURLWithPath: dstPath)
do{
try pngData?.write(to: dstUrl, options: .atomicWrite)
}catch{ } print("dest is %@",dstUrl); UIGraphicsEndImageContext()
}

由于立即调用了截图函数,webView没有足够的时间渲染,只多渲染了一小部分。

之后,我用下面的代码进行测试,注意,这里延时了0.3s,给了webview一定的渲染时间:

    @IBAction func takeScreenshot(){

        webView.frame = CGRect(x: , y: , width: webView.scrollView.frame.size.width, height: webView.scrollView.contentSize.height);

        DispatchQueue.main.asyncAfter(deadline: DispatchTime.now()+0.3) {
let scrollView = self.webView.scrollView UIGraphicsBeginImageContextWithOptions(self.webView.scrollView.contentSize,false, UIScreen.main.scale) scrollView.layer.render(in: UIGraphicsGetCurrentContext()!) let image = UIGraphicsGetImageFromCurrentImageContext() let pngData = UIImagePNGRepresentation(image!); let dstPath = NSHomeDirectory()+"/Documents/test.png"
let dstUrl = URL(fileURLWithPath: dstPath)
do{
try pngData?.write(to: dstUrl, options: .atomicWrite)
}catch{ } print("dest is %@",dstUrl); UIGraphicsEndImageContext()
} }

下面是结果的截图,一切正常:

那么,如果网页更长,0.3秒一定也不够用,我们怎么知道该延时多少呢?

这时候我又发现了一个函数,是属于UIView的,drawHierarchy,根据api描述,第二个参数好像和渲染有关,能不能解决我们的问题呢,继续测试:

 @IBAction func takeScreenshot(){

        webView.frame = CGRect(x: , y: , width: webView.scrollView.frame.size.width, height: webView.scrollView.contentSize.height);

            let scrollView = self.webView.scrollView

            UIGraphicsBeginImageContextWithOptions(self.webView.scrollView.contentSize,false, UIScreen.main.scale)

            self.webView.drawHierarchy(in: CGRect(x: 0, y: 0, width: self.webView.scrollView.frame.size.width, height: self.webView.scrollView.contentSize.height), afterScreenUpdates: true)

            let image = UIGraphicsGetImageFromCurrentImageContext()

            let pngData = UIImagePNGRepresentation(image!);

            let dstPath = NSHomeDirectory()+"/Documents/test.png"
let dstUrl = URL(fileURLWithPath: dstPath)
do{
try pngData?.write(to: dstUrl, options: .atomicWrite)
}catch{ } print("dest is %@",dstUrl); UIGraphicsEndImageContext() }

结果还是不行,效果和使用layer的render方法一样!看来afterScreenUpdates这个参数跟网页的渲染无关了。

那么把Webview frame直接扩大为html内容的大小并截图的方式其实是很有问题的,截图时机不好掌握, 内存和cpu的占用也会很大。

这里要推荐一个github上的项目,https://github.com/startry/SwViewCapture, 它的解决思路如下:

1. 截图时机的掌握:每次通过调整视图frame,只渲染一屏的截图,速度很快,只需稍为延迟,即可保证完美截图。

2.内存和cpu:由于每次只处理一屏幕的截图,内容很少,对cpu和内存的冲击都很小。

下面贴出其中的关键代码:

 fileprivate func swContentPageDraw (_ targetView: UIView, index: Int, maxIndex: Int, drawCallback: @escaping () -> Void) {

        // set up split frame of super view
let splitFrame = CGRect(x: , y: CGFloat(index) * targetView.frame.size.height, width: targetView.bounds.size.width, height: targetView.frame.size.height)
// set up webview frame
var myFrame = self.frame
myFrame.origin.y = -(CGFloat(index) * targetView.frame.size.height)
self.frame = myFrame DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + Double(Int64(0.3 * Double(NSEC_PER_SEC))) / Double(NSEC_PER_SEC)) { () -> Void in targetView.drawHierarchy(in: splitFrame, afterScreenUpdates: true) if index < maxIndex {
self.swContentPageDraw(targetView, index: index + , maxIndex: maxIndex, drawCallback: drawCallback)
}else{
drawCallback()
}
}
}

用WKWebView 截取整个Html页面的更多相关文章

  1. iOS开发WKWebView 返回H5上级页面

    #pragma mark ---- 点击事件 -(void)leftTapClick:(UITapGestureRecognizer *)sender{ //判断是否能返回到H5上级页面 if (se ...

  2. WKWebView与JavaScript交互基础

    login.html 代码 <!DOCTYPE html> <html> <head> <title>使用JavaScript</title> ...

  3. iOS-JavaScript向WKWebView传值

    一.本地代码所需操作 1.创建viewController并遵守协议 @interface ViewController ()<WKNavigationDelegate,WKScriptMess ...

  4. 微信iOS WKWebview 网页开发适配指南

    微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核,需要网页开发者提前做好网站的兼容检查和适配. 背景 WKWebView 是苹果在iOS 8中引入的新组件,目的是提供一个现代的 ...

  5. EL表达式处理字符串 是否 包含 某字符串 截取 拆分...............

    EL表达式处理字符串 是否 包含 某字符串 截取 拆分............... JSP页面页头添加<%@ taglib uri="/WEB-INF/taglib/c.tld&qu ...

  6. iOS WKWebview 网页开发适配指南【转】

    微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核,需要网页开发者提前做好网站的兼容检查和适配.如有问题,可参考文末联系方式,向我们咨询. 背景 WKWebView 是苹果在iO ...

  7. phantomJs页面截图

    因为phantomjs使用了一个真正的渲染引擎WebKit,它能截取一个web页面的真实影像,这是因为phantomjs能够折射出WEB页面上的任何东西,包括html,css,svg和Canvas等. ...

  8. iOS WKWebview 网页开发适配指南

    iOS WKWebview 网页开发适配指南 微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核,需要网页开发者提前做好网站的兼容检查和适配.如有问题,可参考文末联系方式,向我们 ...

  9. 网易严选的wkwebview测试之路

    本文来自网易云社区 作者:孙娇 UIWebView是苹果继承于UIView封装的一个加载web内容的类,它可以加载任何远端的web数据展示在你的页面上,你可以像浏览器一样前进后退刷新等操作.不过苹果在 ...

随机推荐

  1. 人撒娇地撒基督教扫ID祭扫我京东is啊单间

    下下卷惜西,清首花我下望心如单水.低如见惜折 卷水满门我,如二折莲开低下悠子鸦.南水水暮洲 凄暮红过在,莫处言树鸿怀莲绿门莲.杆鸿中花海 见门塘采心,何西杏知底底梅即色花.红两霜言海 秋飞曲杆明,花南 ...

  2. 【Swift 2.2】iOS开发笔记(三)

    1.UITableView 中调用 UIButton 的 setTitle 会闪 滚动列表时比较明显,解决办法: buttonType 改成 custom 即可,但是这样一来 UIButton 的高亮 ...

  3. RuntimeError: An attempt has been made to start a new process before the current process has finished its bootstrapping phase. This probably means that you are not using fork to start your c

    Error Msg: Traceback (most recent call last): File "<string>", line 1, in <module ...

  4. 《Effective C++》实现:条款26-条款31

    条款26:尽可能延后变量定义式的出现时间 C++推荐在使用对象前才定义对象(调用构造函数赋初值) 只在循环中使用的变量定义在循环内部(除非"赋值"成本低于"构造+析构&q ...

  5. windows环境下memcache相关配置及PHP加载相应模块(php7版本)

    原文:https://blog.csdn.net/zhangatle/article/details/77504094 亲测安装成功 php 7.0 nts 86 第一步,首先下载windows版本的 ...

  6. SpringMVC DispatcherServlet在配置Rest url-pattern的一点技巧

    SpringMVC的Controller中已经有了@RequestMapping(value = "detail.do", method = RequestMethod.GET)的 ...

  7. 关于rem布局

    实际UI设计稿给过来为了在手机屏幕上显示清晰,设计稿通常为实际标准手机页面的2倍,一般为640px(以ip5的屏幕尺寸320px设计)或者750px(以ip6的屏幕尺寸为375px设计),这是前提. ...

  8. ant在windows及linux环境下安装

    ant下载 http://ant.apache.org/ https://ant.apache.org/bindownload.cgi 历史版本 ant在windows下安装 解压到D盘 新建系统变量 ...

  9. A.01.10—模块的输出—PWM高端输出

    PWM高端输出比低端输出用得多,如上次提到的卤素灯的控制均是采用高端输出的. PWM高端输出与PWM低端输出的差异就像固态高端输出与固态低端输出的差异类似,从线路失效后对用户的影响来看:高端输出为控制 ...

  10. java 11 完全支持Linux容器(包括Docker)

    许多运行在Java虚拟机中的应用程序(包括Apache Spark和Kafka等数据服务以及传统的企业应用程序)都可以在Docker容器中运行.但是在Docker容器中运行Java应用程序一直存在一个 ...