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 转换过程可理解成： DOM→Canvas→Image。	javascript 插件 resterizehtml 转换过程可理解成： DOM→SVG的ForeignObject→Canvas→Image
selenium操作chrome浏览器需要有ChromeDriver驱动来协助		Puppeteer是一个Node库，提供了高级API通过DevTool来控制Chrome或Chromium。默认headless也就是无UI的chrome，也可以配置为有UI	使用Canvas截图兼容低版本浏览器时，不能使用CSS3属性和带有前缀的属性
			两种截图方式把DOM绘制到Canvas，再通过Canvas输出图片

 

	Selenium Webdriver	Phantomjs	Puppeteer.
版本		停止更新（V2.1.1）	持续更新（V1.8）
官网	https://www.selenium.dev/documentation/en/webdriver/ https://github.com/SeleniumHQ/selenium	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较少	部署相对复杂，且需要翻墙 脚本语言使用新标准，学习成本较高如果你使用 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