js 网页失效截图
先说一下，无头浏览器即headless browser，是一种没有界面的浏览器。它有浏览器该有的一切功能，除了界面。可以通过命令进行浏览器内的各种操作
| 无头浏览器 selenium. | 无头浏览器 Phantomjs | 无头浏览器 Puppeteer |
canvas html2canvas v1.0.0-rc.7 | SVG resterizehtml |
|---|---|---|---|---|
|
Selenium提供了多种语言的接口和多个平台/浏览器的支持 常见的有Java, Python, Javascript, Ruby等 https://www.selenium.dev/documentation/zh-cn/webdriver/browser_manipulation/ |
javascript node phantomjs |
javascript node 环境安装 安装 npm install puppeteer |
javascript 插件html2canvas 转换过程可理解成：
|
javascript 插件 resterizehtml 转换过程可理解成：
|
|
selenium操作chrome浏览器需要有ChromeDriver驱动来协助 |
Puppeteer是一个Node库，提供了高级API通过DevTool来控制Chrome或Chromium。默认headless也就是无UI的chrome，也可以配置为有UI |
使用Canvas截图兼容低版本浏览器时，不能使用 |
||
|
|
两种截图方式 把DOM绘制到Canvas，再通过Canvas输出图片 |
|||
|
Selenium Webdriver | Phantomjs | Puppeteer. | |
|---|---|---|---|
| 版本 | 停止更新（V2.1.1） |
持续更新（V1.8） |
|
| 官网 | http://phantomjs.org，其支持多个平台的使用和部署 |
https://github.com/puppeteer/puppeteer https://developers.google.com/web/tools/puppeteer/get-started |
|
| js | es5 | ES5，部分支持ES6、ES7(箭头函数,async,await等) | |
| 浏览器 | 全部浏览器 | WebKit内核 | 自带Chorme |
| 优点 |
多语言、多浏览器支持 唯一一个支持所有五个主要的网络浏览器（Chrome、IE、Edge、Firefox和Safari）的框架。 |
持续更新，功能性能可期 脚本语言更适合原生开发，学习成本低 使用新ES标准，对异步事件处理更简便
|
|
| 缺点 |
配置慢，对版本配置苛刻， 更新响应的驱动 |
无人维护 bug 多 对于页面异步的事件处理无力，部分情况下只能用延迟解决 不支持flash 开放的api较少 |
部署相对复杂，且需要FQ 脚本语言使用新标准，学习成本较高如果你使用 Firefox、Edge或Safari进行开发或测试，Puppeteer无法正常工作，你应该选择Selenium Webdriver |
| 性能 | 运行速度比 Puppeteer慢的多 | 它的高速度也是很多开发者选择测试工具的一大考量 | |
| 性能分析 | 无 | 有 | 有,功能同Chromen性能分析工具 |
cutimg01 puppeteer
cutimg03 selenium-webdriver
开始和结束时间
一、无头浏览器 selenium python 运行
selenium操作 chrome浏览器需要有ChromeDriver驱动来协助，根据本地谷歌浏览器的版本对应安装ChromeDriver
代码执行及效果：
无头浏览器 selenium Webdriver(node.js） javascript 运行
代码执行及效果
二、node phantomjs
代码执行及效果
(截图是全网站的全屏）
三、无头浏览器 js 实现
node 环境安装 安装npm install puppeteer
代码执行及效果
四、canvas
、插件 html2canvas
代码执行及效果
demo1
demo2
下载图片
svg 代码demo
参考文章https://juejin.im/post/6844903676738273287#heading-13
