node.js 创建服务器_使用Node.js和SlimerJS创建网页截图-CSDN博客

node.js 创建服务器

Last week I featured PhantomJS, a headless WebKit tool, which allows for taking screenshots, automating events on the page, and so on. PhantomJS is an excellent tool that does so much but being locked into the WebKit engine doesn't help if you want to test other rendering engines like Firefox. Mo engines, mo problems.

上周，我介绍了无头WebKit工具PhantomJS，该工具可用于截屏，自动执行页面上的事件等。 PhantomJS是一个出色的工具，可以做很多事情，但是如果您想测试其他渲染引擎(如Firefox)，则将其锁定在WebKit引擎中将无济于事。莫引擎，莫问题。

Luckily SlimerJS exists. SlimerJS is very much like PhantomJS: a promise-based automation system that uses Firefox's Gecko rendering engine instead of WebKit. Let's have a look at how to automate screenshot creation using SlimerJS!

幸运的是， SlimerJS存在。 SlimerJS非常类似于PhantomJS：基于承诺的自动化系统，该系统使用Firefox的Gecko呈现引擎而不是WebKit。让我们看看如何使用SlimerJS自动创建屏幕截图！

创建截图 (Creating a Screenshot)

SlimerJS is Node.js-based so you'll write your screenshot snapping code with JavaScript:

SlimerJS是基于Node.js的，因此您将使用JavaScript编写屏幕快照捕捉代码：


var webpage = require('webpage').create();
webpage
  .open('https://davidwalsh.name')
  .then(function(){
    webpage.render('dwb.png', { onlyViewport: true });
    slimer.exit()
  });

With your script written you'll execute:

编写脚本后，您将执行：


slimerjs take-screenshot.js

SlimerJS has its own command line tool which you'll get during install.

SlimerJS有自己的命令行工具，您将在安装过程中获得该工具。

设置视口大小 (Setting Viewport Size)

SlimerJS, much like PhatomJS, allows you to set the viewport so you can take screenshots at any size:

与PhatomJS一样，SlimerJS允许您设置视口，以便您可以截取任意大小的屏幕截图：


var webpage = require('webpage').create();
webpage
    .open('https://davidwalsh.name')
    .then(function(){
      webpage.viewportSize = { width: 1042, height: 768 };
      webpage.render('dwb.png', { onlyViewport: true });
      slimer.exit()
    });

... which is important for mobile Firefox testing as well. I recommend setting up a script to take screenshots at all popular sizes when you hand designs over to a client or simply want to check your site's integrity!

...这对移动Firefox测试也很重要。我建议您设置一个脚本，以便在将设计移交给客户或只是想检查网站的完整性时，以所有常用的尺寸截取屏幕截图！