Phantomjs - 截取网页截图

Posted 2023-02-22

【中文标题】Phantomjs - 截取网页截图

【英文标题】：Phantomjs - take screenshot of a web page

【发布时间】：2013-06-15 21:35:07

【问题描述】：

我有一个 URL（例如 http://www.example.com/OtterBox-77-24444-Commuter-Series-Optimus/dp/B00A21KPEI/ref=pd_sim_cps_4）并想截取它并在我的网页上预览。意思是，用户点击预览按钮，PhantomJS 需要将网页预览为 PNG/JPEG

我也可以使用任何其他开源软件。

【参考方案1】：

我假设你已经安装了 Phantomjs 并且在你的 .bashrc 中创建了一个别名或者更新了你的系统路径来调用 Phantomjs 二进制文件。如果没有，你需要仔细阅读一些初学者教程：http://net.tutsplus.com/tutorials/javascript-ajax/testing-javascript-with-phantomjs/

设置完成后，您需要编写一个简单的 javascript 文件，您将在终端（或 shell，如果您使用 Windows）中调用该文件。我将在下面提供一个简单的示例脚本。

var WebPage = require('webpage');
page = WebPage.create();
page.open('http://google.com');
page.onLoadFinished = function() 
   page.render('googleScreenShot' + '.png');
   phantom.exit();

然后，保存您的 js 文件。打开终端或 shell 并运行以下命令

phantomjs yourFile.js

就是这样。检查您调用 js 文件的目录，您应该有一个带有网页屏幕截图的 png 文件。

这非常简单，使用 phantomjs 有很多注意事项，但这是我能做到的最基础的。如果您需要 phantomjs 的其他配方，请尝试查看以下示例脚本：https://github.com/ariya/phantomjs/wiki/Examples

【讨论】：

如果有人看到这个...如何使用此方法保存我在本地创建的html页面的屏幕截图？

@Chris 如果您正在运行本地服务器，您应该能够导航到http://localhost 或您从哪里提供服务。它的工作原理完全相同，因为浏览器通常不关心给定服务器的位置。如果您没有运行本地服务器，请尝试使用文件协议导航到文件的绝对路径，例如file:///path/to/file.html

@acobster 我在实习期间离开那个项目有一段时间了。但是感谢您的努力，尤其是在这个新年季节！

【参考方案2】：

上面的答案对于基本用法来说很好，但 PhantomJS 不知道是否所有 AJAX 请求都已加载。我发了url-to-image 来帮助解决这个问题。

npm install url-to-image

编写 screenshot.js

var screenshot = require('url-to-image');
screenshot('http://google.com', 'google.png').done(function() 
    console.log('http://google.com screenshot saved to google.png');
);

运行脚本node screenshot.js

【讨论】：

嗨@Kimmo，我可以在其中设置高度、宽度或用户代理吗？

@MohitArora 是的，您可以设置宽度和高度。文档非常糟糕，根本没有提到选项。我在github.com/kimmobrunfeldt/url-to-image#api添加了详细的使用示例

这太棒了。 npm i -g url-to-image; urltoimage http://localhost:3000 ~/Desktop/foo.jpg 最后整页图片。看在上帝的份上，请将其打包为一个真正有效的 Chrome 扩展程序！

效果很好。我结合PosteRazor 将使用此工具生成的长而细的PNG 分割成多页PDF，然后我可以打印。一些细节：在 PosteRazor 中：在步骤 1 中输入图像（例如“foo.png”），单击进入步骤 3 并调整设置以使用“0”重叠高度和宽度（重叠位置不会'重要）；点击进入第 4 步，然后将页面大小 -> 宽度的设置调整为“1”。