以不同格式捕获网页屏幕

• 下载 CaptureWebPage-noexe.zip - 12.8 KB
• 下载 CaptureWebPage.zip - 6.7 MB

介绍  

有时需要捕获网页的屏幕截图。有很多浏览器扩展程序、插件等可以做到这一点。但是所有这些情况都需要使用 Web 浏览器，而且输出类型有限制。PhantomJS 为您提供了执行此操作的能力。本教程展示了如何使用 PhantomJS 按照您想要的输出类型捕获网页。

背景  

通常需要截取网页的屏幕截图。特别是当我们与客户打交道以演示样品，或者我们需要编写带有样品屏幕的文档时。如果您是 Windows 用户，那么您可能会使用 MS Paint 来完成它。否则，有很多工具和浏览器的扩展/插件等。但是，如果您想自己开发该工具，或者想要无需安装浏览器即可获得网页的全屏截图怎么办？或者您想一次以不同的格式保存屏幕？那么 PhantomJS 为您提供这些便利。

在本文中，您将看到如何使用 PhantomJS 构建这样的工具。如果您想阅读更多关于 PhantomJS 的信息，请访问他们的 网站。

注意：如果您下载没有 phantomjs.exe 的 src，那么您需要从 PhantomJS 的 网站 下载 exe/API。下载并解压 zip 文件后，请将“phantomjs.exe”复制到下载解决方案的“Resources”目录中。

使用代码 

基本上，phantomjs.exe 会执行一组它能识别的指令或脚本。 phantomjs.exe 的用途非常广泛，但这超出了本文的范围。这份入门 指南 将向您展示其中的一些功能。在这里，我将向您展示如何使用一个基本脚本以一种或多种或所有“gif”、“png”、“jpeg”、“pdf”格式捕获我们想要的网页。

phantomjs 的脚本以 .js 扩展名保存，这是我使用的非常简单的脚本。

//
var page = require('webpage').create();
page.open('your_ur', function () {
    
page.render('your_path_to_save_the_screen'); //e.g: c:/myweb.pdf
phantom.exit();
});
// 

在上面的脚本中，如果我们编写多个 page.render('..') 语句，那么网页屏幕将保存在多个文件中。文件的格式将由“your_path_to_save_the_screen”中使用的文件/路径的扩展名决定。

因此，为了使脚本具有动态性，我使用了以下模板（您可以在 /Resources/render_template.js 中找到它）

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

page.open('[UserURL]', function () {

    [RENDER_CODE]

    phantom.exit();

});
// 

现在，当用户运行应用程序并设置他想要的 URL、路径、文件名和类型时，[UserURL] 会动态地替换为该 URL，并且 [RENDER_CODE] 会根据用户的文件路径和扩展名被一个或多个 page.render(...) 语句替换。模板文件保持不变，脚本被写入一个名为“render.js”的新文件中。 这是 C# 代码来完成它（为了简单起见，我不讨论事件和其他逻辑）：

string render_string = "page.render('fileName');";
string render_code = "";

if (cbJpeg.Checked)
{
    render_code += Environment.NewLine + render_string.Replace("fileName", 
      Path.Combine(path, txtName.Text + "." + "jpeg").Replace("\\", "/"));
}
if (cbGif.Checked)
{
    render_code += Environment.NewLine + render_string.Replace("fileName", 
      Path.Combine(path + txtName.Text + "." + "gif").Replace("\\", "/"));
}
if (cbPng.Checked)
{
    render_code += Environment.NewLine + render_string.Replace("fileName", 
      Path.Combine(path + txtName.Text + "." + "png").Replace("\\", "/"));
}
if (cbPdf.Checked)
{
    render_code += Environment.NewLine + render_string.Replace("fileName", 
      Path.Combine(path + txtName.Text + "." + "pdf").Replace("\\", "/"));
}

StreamReader reader = new StreamReader("render_template.js");
string source_content = reader.ReadToEnd();
source_content = source_content.Replace(
  "[UserURL]", url).Replace("[RENDER_CODE]", render_code);
reader.Close();

StreamWriter writer = new StreamWriter("render.js");
writer.Write(source_content);
writer.Close();

最后，我们需要使用我们想要的脚本文件调用“phantomjs.exe”。 这是 C# 代码

var process = new System.Diagnostics.Process();
process.StartInfo = new System.Diagnostics.ProcessStartInfo { 
  FileName = "phantomjs.exe", Arguments = "render.js"};
process.Start();
process.WaitForExit();

我希望您会喜欢它，现在您可以构建自己的网页屏幕截图工具了