The problem Recently I had received complaint about my capture service not export complete image. It seems that this problem only occurs when the page’s is extremely long. The broken image is like this: Chromium’s limit So I Googled for the problem and I found a lot issues on Github that target the same problem. When reading throught this issue, I got the fact that this problem is caused by Chromium’s limit....
TL;DR 给太长不看同学的内容速览： Headless是Chrome 59中加入的一种新的运行模式 Headless Chrome可以替代PhantomJS，并且更加强大 可以通过Chrome DevTools Protocol这个协议对远程的Chrome浏览器进行调试 chrome-remote-interface是Nodejs下Chrome DevTools Protocol的封装 可以使用Emulation.setVisibleSize对整个页面进行截屏 PhantomJS的问题 之前有数报表的导出图片功能是用PhantomJS做的。PhantomJS有两个很大的问题：第一是，它的渲染引擎和JavaScript引擎基于Qt5，版本不是很高，所以渲染的时候会有一些兼容问题，而且JavaScript引擎也相对比较古老（最新的PhantomJS release是2.1版，这个版本基于Qt5.5。Qt5.5使用的Chromium内核版本是40，Chromium现在最新版本是62）。第二，PhantomJS现在已经处于一种维护不多的状态（Github上有1901个open issues）。 作为一个个人项目，PhantomJS在各种自动化测试以及页面自动化操作中被广泛使用，达到了很高的高度。但因为以上两个缺点，使用PhantomJS将不会是长久之计。 Chrome的Headless模式 Headless Chrome其实不是一个全新的工具，而是普通的Chrome浏览器的headless模式。headless就是指Chrome的UI部分是不运行的。 所以只要你的机器上安装了Chrome 59+，你就可以使用Headless Chrome。相比之前npm install时经常要从bitbucket下载PhantomJS binary的麻烦事，Headless Chrome要方便不少，毕竟Web开发者一般都安装了Chrome。 你可以在命令行中用headless模式启动Chrome： chrome \ --headless \ # Runs Chrome in headless mode. --disable-gpu \ # Temporarily needed for now. --remote-debugging-port=9222 \ https://www.chromestatus.com # URL to open. Defaults to about:blank. 我们可以直接在Chrome的CLI中进行一些操作，比如截屏： chrome --headless --disable-gpu --screenshot --window-size=1280,1696 https://www.chromestatus.com/ 但一般我们很少会这样直接使用Headless Chrome。对这部分有兴趣的同学可以看官方文档，这里就不多说了。 Headless Chrome的最大的优点就是，它就是Chrome，所以可以保持Evergreen，也就是持续的更新。并且我们可以在Headless模式使用Chrome带来的所有的现代Web平台的特性。所以Headless Chrome就成为了PhantomJS的完美升级版替代品。 强大的Chrome DevTools Protocol 要在脚本中和Chrome进行交互，需要用Chrome DevTools Protocol这个协议。所以这里首先介绍一下这个协议。...