phantomjs网页截图_使用Node.js和PhantomJS创建网页截图

phantomjs网页截图

Automation on the web has gotten incredibly accessible and advanced, much in part to utilities like PhantomJS.  PhatomJS allows you to do headless WebKit render testing, network monitoring, page automation, and much more.  One of the simple tasks I like using PhatomJS for is screenshot creation.  Sure I could use another service or another utility but PhantomJS is so flexible and easy to use that there's no need to look elsewhere!

网络上的自动化已变得不可访问且先进，其中很大一部分是PhantomJS之类的实用程序。 PhatomJS允许您执行无头WebKit渲染测试，网络监视，页面自动化等等。 我喜欢使用PhatomJS进行的简单任务之一是截图创建。 当然，我可以使用其他服务或其他实用程序，但PhantomJS如此灵活且易于使用，因此无需查看其他地方！

创建截图 (Creating a Screenshot)

Assuming you've downloaded PhatomJS, create a JavaScript file (screenshot.js for example) with the following contents:

假设您已经下载了PhatomJS，请创建一个包含以下内容JavaScript文件(例如screenshot.js )：

var page = require('webpage').create();
page.open('https://davidwalsh.name/', function() {
  page.render('davidwalshblog.png');
  phantom.exit();
});

With that script created, open your command line tool and execute the following:

创建该脚本后，打开命令行工具并执行以下操作：

phantomjs screenshot.js

That's all it takes to create a screenshot of a website!

这就是创建网站屏幕快照所需的一切！

设置视口大小 (Setting Viewport Size)

PhantomJS makes setting the viewport size easy as well, just one setting to change:

PhantomJS也使设置视口大小变得容易，只需更改一项设置即可：

var page = require('webpage').create();
page.viewportSize = { width: 1920, height: 1080 };
page.open('https://davidwalsh.name/', function() {
  page.render('davidwalshblog1920.png');
  phantom.exit();
});

Modifying setting sizes is nice so that you can quickly automate different media query sizes based on your site's specifications!

修改设置大小很不错，因此您可以根据站点的规格快速自动执行不同的媒体查询大小！

Every few weeks I'll take screenshots of my site to ensure I've not made any design changes that have broken any of my designs.  I'll also use this strategy for creating screenshots of redesign ideas.  I love how easy automation of these types of tasks has gotten these days!

每隔几周，我都会截取我的网站的屏幕截图，以确保没有进行任何破坏我的设计的设计更改。 我还将使用这种策略来创建重新设计构想的屏幕截图。 我喜欢这些天这些类型的任务的自动化有多么容易！

翻译自: https://davidwalsh.name/get-webpage-screenshot

phantomjs网页截图