qt如何捕获应用程序输出_构建一个截图应用程序（第1部分）：网页模块和屏幕捕获...

qt如何捕获应用程序输出

If you read my last article which explained PhantomJS and some of its uses. I mentioned that in a follow-up article, we will build a website screenshot tool.

如果您阅读了我的上一篇文章，该文章解释了PhantomJS及其一些用法。 我在后续文章中提到，我们将构建一个网站截图工具。

Well, this is the first in the series of follow-up articles. Before we jump into building the tool, we first need to dig deeper into PhantomJS screen capture API. We also need to know more about configuring the "page".

好吧，这是后续文章系列中的第一篇。 在开始构建该工具之前，我们首先需要更深入地研究PhantomJS屏幕捕获API。 我们还需要了解有关配置“页面”的更多信息。

使用PhantomJS网页模块 ( Working with the PhantomJS Web Page Module )

In the last article, we had an example that went like this.

在上一篇文章中，我们有一个像这样的例子。

var page = require('webpage').create();

page.open('https://scotch.io', function (status) {
    page.render('scotch.png');

    phantom.exit();
});

Executing this script takes a screenshot of Scotch.io homepage. We could also save the image in different formats. We could save the page as a PDF document, JPEG, PNG, and GIF. So if your boss at work says, create a PDF of the sales report, you could create an HTML page with a server-side language and use PhantomJS save the page as a PDF.

执行此脚本将获取Scotch.io主页的屏幕截图。 我们还可以将图像保存为不同的格式。 我们可以将页面另存为PDF文档，JPEG，PNG和GIF。 因此，如果您上班的老板说，创建销售报告的PDF，则可以使用服务器端语言创建HTML页面，然后使用PhantomJS将页面另存为PDF。

配置网页 ( Configuring the WebPage )

It's cool that PhantomJS allows us to visit websites and stuff, but what if we wanted to restrict the page from doing somethings. For example, we need to disable Javascript from running on the page, we could do this.

PhantomJS允许我们访问网站和其他内容，这很酷，但是如果我们想限制页面执行某些操作，该怎么办。 例如，我们需要禁止Javascript在页面上运行，我们可以这样做。

var page = require("webpage").create();

page.settings.javascriptEnabled = false;

This prevents the page page from running any Javascript. We could also go further and disable more features like loading images.

这样可以防止页面page运行任何Javascript。 我们还可以更进一步，禁用更多功能，例如加载图像。

page.settings.loadImages = false;

We could change the userAgent of PhantomJS and make it look like the latest version of Chrome, or a custom user agent like this.

我们可以更改PhantomJS的userAgent ，使其看起来像最新版本的Chrome，或者像这样的自定义用户代理。

page.settings.userAgent = 'Scotchy McScotchFace';
// a play on words like Google's Parsey McParseFace.

More on PhantomJS's settings here. Note: All these settings must be set before calling open.

更多关于PhantomJS的设置在这里 。 注意：必须在调用open之前设置所有这些设置。

// Will work
page.settings.userAgent = 'Scotchy McScotchFace';

page.open('https://scotch.io', function (status) {
    // Won't work
    page.settings.userAgent = 'Scotchy McScotchFace: Rule Breaker';
});

缩放页面 ( Zooming the Page )

In most web browsers, pressing cmd or ctrl + + zooms a webpage, in PhantomJS, we could zoom the webpage by increasing or reducing zoomFactor.

在大多数Web浏览器中，按cmd或ctrl + +缩放网页，在PhantomJS中，我们可以通过增大或减小zoomFactor来缩放网页。

page.zoomFactor = 0.25;

The default value for zoomFactor is 100 or 1. We can set the values either using decimals between 0 and 1 or number between 1 and 100.

zoomFactor的默认值为100或1。我们可以使用0到1之间的小数或1到100之间的数字来设置值。

设置视口 ( Setting the Viewport )

The viewport the window through which we view the page. For example, if your computer screen is 1920 pixels wide and 1080 pixels high, it doesn't matter how large the web page is, the viewport is 1920 by 1080. So with PhantomJS, we can change the browser viewport. If you noticed, so far — when you take a website screenshot, the width of the image generated is 400 pixels. This happens because the default viewport width of PhantomJS is 400 pixels.

视口是我们用来查看页面的窗口。 例如，如果您的计算机屏幕是1920像素宽和1080像素高，那么网页的大小无关紧要，视口就是1920 x1080。因此，使用PhantomJS，我们可以更改浏览器的视口。 到目前为止，如果您已经注意到—截取网站屏幕截图时，生成的图像宽度为400像素。 发生这种情况是因为PhantomJS的默认视口宽度为400像素。

To change the viewport, we use the viewportSize page property which takes an object containing the width and height of the viewport.

要更改视口，我们使用viewportSize page属性，该属性接受一个包含视口宽度和高度的对象。

var page = require('webpage').create();

page.viewportSize = { width: 1366, height: 667 };

page.open('https://scotch.io', function (status) {
    page.render('scotch.png');

    phantom.exit();
});

Now, if we run this script, we can see that the screenshot width is 1366 pixels, and the height is ignored. Setting the viewport height to 1 pixel still won't change anything as the screenshot height will be whatever the the site height is. To take screenshots of a specific size, we need clipping.

现在，如果运行此脚本，我们可以看到屏幕截图的宽度为1366像素，而高度被忽略。 将视口高度设置为1像素仍然不会发生任何变化，因为屏幕截图的高度将与站点高度无关。 要拍摄特定大小的屏幕截图，我们需要进行裁剪。

剪辑网页截图 ( Clipping a Webpage Screenshot )

Clipping is like drawing a box over the page, and taking the shot of content in the box.

剪辑就像在页面上绘制一个框，然后拍摄框中的内容。

var page = require('webpage').create();

page.clipRect = { top: 0, left: 0, width: 1024, height: 768 };

page.open('https://scotch.io', function (status) {
    page.render('scotch.png');

    phantom.exit();
});

Doing this gets you a screenshot that is 1024 by 768 pixels. It doesn't matter how large the page is, the size of the screenshot is always the same.

这样做可以获得1024 x 768像素的屏幕截图。 无论页面有多大，屏幕截图的大小始终相同。

构建我们的截图脚本 ( Building our Screenshot Script )

Before we wrap up this article, let's talk about using PhantomJS with Node. Since PhantomJS cannot be integrated into Node and vice versa, we need to find a way to bridge the differences between both platforms. Fortunately for us, we can run a command line script with Node. So all we need to do is rewrite our scripts above to fit the program.

在结束本文之前，我们先讨论一下如何将PhantomJS与Node一起使用。 由于PhantomJS无法集成到Node中，反之亦然，因此我们需要找到一种弥合两个平台之间差异的方法。 对我们来说幸运的是，我们可以使用Node运行命令行脚本。 因此，我们要做的就是重写上面的脚本以适合该程序。

Create a file generator.js and place this code in it.

创建一个文件generator.js并将此代码放入其中。

var args = require('system').args;
var page = require('webpage').create();

var url = args[1];
var save = args[2];
var width = args[3];
var height = args[4];

page.viewportSize = { width: width, height: height };

page.open(url, function () {
    page.render(save);
    phantom.exit();
});

Now we see some weird require imports. Take this command for example.

现在，我们看到一些奇怪的require进口。 以该命令为例。

phantomjs generator.js https://scotch.io screenshot.png 1920 1080

Well, we want generator.js to be able to parse the arguments being passed into the script. To do that, we need to capture the arguments that we pass to the script. If we require the system module in PhantomJS, we can get the arguments passed to the script from the args object present on the system module. That's all we need do to run a command following this pattern from a command line and generate a simple website screenshot.

好吧，我们希望generator.js能够解析传递到脚本中的参数。 为此，我们需要捕获传递给脚本的参数。 如果我们需要PhantomJS中的system模块，则可以从system模块上存在的args对象获取传递给脚本的args 。 这就是我们需要执行的所有操作，以便从命令行按照此模式运行命令并生成简单的网站屏幕截图。

phantomjs generator.js<url> <screenshot.extension> <width> <height>

*Note: * You must always call phantom.exit() or else PhantomJS won't stop script execution.

* 注意：*您必须始终调用phantom.exit() ，否则PhantomJS不会停止脚本执行。

结语 ( Wrapping Up )

In the next article, we will talk about the project setup, building a simple server to serve our application, and using our generator.js in Node.

在下一篇文章中，我们将讨论项目设置，构建一个简单的服务器来为我们的应用程序服务以及在Node中使用generator.js 。

翻译自: https://scotch.io/tutorials/build-a-screenshot-app-part-1-web-page-module-and-screen-capture

qt如何捕获应用程序输出