网站截图


407

有什么方法可以用PHP拍摄网站的屏幕截图,然后将其保存到文件中?


2
如果您需要一个解决方案,请查看Usersnap-这是一项很好的服务,可提供准确的网站屏幕截图。您只需在页面上添加一个小的Javascript代码段即可使其正常运行。
格雷戈尔

1
Usersnap无法处理使用Ajax生成此页面上的内容的网页。我该如何实现?可以说:在页面的初始加载完成后10秒钟制作屏幕截图
rubo77

1
@ rubo77:Usersnap支持这样的动态DOM,我已经在您的页面上尝试过-屏幕截图会重现包括所有位置在内的确切位置。
Gregor 2013年

Answers:


280

最后编辑时间:7年后,我仍然得到upvotes这个答案,但我想这一块现在更加精确。


当然可以,但是您需要使用某些内容渲染页面。如果您真的只想使用php,建议您使用HTMLTOPS,它会呈现页面并将其输出到ps文件(ghostscript)中,然后将其转换为.jpg,.png和.pdf可能会有点慢复杂的页面(并且不支持所有CSS)。

否则,您可以使用wkhtmltopdf以pdf,jpg等格式输出html页面。接受CSS2.0,使用webkit(Safari的包装器)呈现页面。您还必须将其安装在服务器上。

UPDATE现在,随着新的HTML5和JS的功能,也可以在页面呈现到使用JavaScript画布对象。这是一个不错的库:Html2Canvas这是同一作者的实现,可以得到类似G +的反馈。将dom渲染到画布中之后,就可以通过ajax发送到服务器并将其另存为jpg。

编辑:您可以使用imagemagick工具将pdf转换为png。我的wkhtmltopdf版本不支持图像。例如convert html.pdf -append html.png

编辑这个小shell脚本给出了一个简单的/但可以在php5-cli和上面提到的工具的Linux上使用的示例。

编辑:我现在注意到wkhtmltopdf团队正在另一个项目上:wkhtmltoimage,它直接为您提供jpg


11
+1代表wkhtmltopdf。我玩弄了其他一些库,但是除了非常基本的HTML和CSS之外,没有其他库支持任何其他功能。wkhtmltopdf可以完成Safari的所有工作,因此您在那很安全。
Wim

7
wkhtmltoimage效果很好!谢谢你的提示。也输出png。
yuttadhammo 2011年

2
现在您提到wkhtmltopdf KnpLabs有一个包装器github.com/KnpLabs/snappy
rmontagud

1
@rmontagud wkhtmltopdf的用法非常简单,顺便说一下,OOP包装器总是很好的!
Strae

1
几年前,这些都是不错的解决方案,但是它们所基于的浏览器技术并没有跟上最新的HTML5 / CSS规范。如果你呈现一个网站,利用网络字体,SVG,帆布的Flexbox,就等于是好运气得到一个准确的屏幕截图。如果你想准确的截图检查我的答案,它使用urlbox
cjroebuck

87

从PHP 5.2.2开始,可以仅使用PHP捕获网站

图像抓屏 —捕获整个屏幕

<?php
$img = imagegrabscreen();
imagepng($img, 'screenshot.png');
?>

imagegrabwindow-使用Windows句柄(COM实例中的HWND属性)获取窗口或其客户区

<?php
$Browser = new COM('InternetExplorer.Application');
$Browserhandle = $Browser->HWND;
$Browser->Visible = true;
$Browser->Fullscreen = true;
$Browser->Navigate('http://www.stackoverflow.com');

while($Browser->Busy){
  com_message_pump(4000);
}

$img = imagegrabwindow($Browserhandle, 0);
$Browser->Quit();
imagepng($img, 'screenshot.png');
?>

编辑:请注意,这些功能仅在Windows系统上可用!


26
真的不是PHP吗?
Toby Allen

这是使用Internet Explorer浏览器来渲染内容。
keanu_reeves

55

如果您不想使用任何第三方工具,那么我会遇到一种使用Google Page Insight api的简单解决方案。

只需使用params调用它的api screenshot=true

https://www.googleapis.com/pagespeedonline/v1/runPagespeed?
url=https://stackoverflow.com/&key={your_api_key}&screenshot=true

对于移动网站视图&strategy=mobile参数传递,

https://www.googleapis.com/pagespeedonline/v1/runPagespeed?
url=http://stackoverflow.com/&key={your_api_key}&screenshot=true&strategy=mobile

DEMO


3
这非常酷,而且在不提供api密钥的情况下也可以正常工作。虽然返回的图像已损坏,但您需要将所有'_'替换为'/',并将所有'-'替换为'+',然后可以将其添加为数据uri
Robert Went 2014年

9
这太棒了。我已经编写这件事在gist.github.com/jaseclamp/d4ac6205db352e822ff6
JaseC

21
因此,作为参考,Google的Page Insight API是第三方工具。
Jimbo,2015年

1
屏幕截图的分辨率限制为320x240,就像拇指一样
Gabriele F.

1
非常棒!它有一定的使用限制吗?
moreirapontocom

19

您可以使用简单的无头浏览器(例如PhantomJS)来抓取页面。

您也可以将PhantomJS与PHP结合使用。

看看这个小php脚本可以做到这一点。在这里看看https://github.com/microweber/screen

这是API- http: //screen.microweber.com/shot.php?url = /programming/757675/website-screenshots-using-php


PhantomJS通常是一个很好的解决方案,尽管当我正是出于这个目的使用它时,并不是所有HTML接口元素都能正确呈现。
ultrageek

2
screen.microweber.com/shot.php?url=https://stackoverflow.com/…现在是404,想知道这里的答案是否应该删除。无论哪种情况,都应进行更新。
Funk Forty Niner

18

这应该对您有好处:

https://wkhtmltopdf.org/

确保您下载了wkhtmltoimage发行版!


1
顺便说一句,我只是使用apt-get将它安装在Ubuntu 10.04上。但是,当我运行它时,它非常非常慢,并且PDF布局是歪斜的,并不是一个切实可行的选择。但是,它显示出有望以这种方式(最终)使用KHTML进行图像生成。
Volomike

@Volomike-您无法获得比这更好的结果,因为您知道,使用的是标准的浏览器。关于速度,与我合作的公司已在需要细粒度(但较小)CSS项目的其他项目中反复使用它。
基督教徒

我可以保证该产品的功效。我为政府客户开发图表应用程序,这些应用程序是通过html / css交付的,但必须将其归档为pdf。没有其他Web到PDF的产品能够像wkhtmltopdf那样完美地再现我们的图表。
Daniel Szabo

@Volomike:存储库中的版本通常不是最新版本;从源代码安装最新的稳定版本对我来说,解决了许多旧版本的怪癖。
Piskvor在2011年

10

是。您将需要一些东西,例如:

请参阅* nx上的khtmld(aemon)。请参阅适用于Windows的Url2Jpg,但由于它是dotNet应用程序,因此您还应该检查Url2Bmp

两者都是控制台工具,您可以从您的Web应用程序中使用它们来获取屏幕截图。

也有提供它的Web服务。检查这个出来的例子。

编辑:

链接对您很有用。


10

它是用Python编写的,但是仔细阅读文档和代码,您可以确切地看到它是如何完成的。如果您可以运行python,那么它是为您准备的解决方案:

http://browsershots.org/

请注意,所有内容都可以在一台计算机上运行一个平台,也可以在一台虚拟机上运行其他平台。

免费,开放源代码,滚动至页面底部,找到文档,源代码和其他信息的链接。


24
规则37:没有过度杀伤力。只有“明火”和“重新装弹的时间”。
亚当·戴维斯

源代码仍会启动桌面浏览器进行渲染。它不是完全线程安全的,可能易于锁定。
Volomike

@Volomike-是的,但是如果您需要查看浏览器运行时页面的外观,几乎没有更好的选择。HTML渲染引擎仅适用于当今的JavaScript重磅页面。设置适当的执行权限和超时将限制运行外部程序的困难和风险。
亚当·戴维斯


5

好吧,PhantomJS是一种浏览器,可以轻松地放在服务器上并将其集成到php。您可以在WDudes中找到代码。它们具有更多功能,例如指定图像大小,缓存,下载为文件或在img src中显示等。

<img src=”screenshot.php?url=google.com” />

URL参数

  • 宽度和高度:screenshot.php?url = google.com&w = 1000&h = 800

  • 裁剪时:screenshot.php?url = google.com&w = 1000&h = 800&clipw = 800&cliph = 600

  • 禁用缓存并加载新的
    屏幕快照:screenshot.php?url = google.com&cache = 0

  • 要下载图像,请执行以下操作:screenshot.php?url = google.com&download = true

您可以在此处查看该教程:使用不带API的PHP捕获网站的屏幕截图


哦。对于那个很抱歉。看起来该博客不再存在。试试github.com/graphcool/chromeless @NarendraVerma
Gijo Varghese

4

cutycapt可以将网页保存为大多数图像格式(jpg,png ..)从您的突触下载,它比wkhtmltopdf更好



3

我终于按照@boksiora的建议使用microweber / screen进行设置。
最初在尝试上述链接时,我得到了什么:

Please download this script from here https://github.com/microweber/screen

我在Linux上。因此,如果要运行它,可以根据环境调整我的步骤。
这是我在DOCUMENT_ROOT文件夹的外壳上执行的步骤:

$ sudo wget https://github.com/microweber/screen/archive/master.zip
$ sudo unzip master.zip
$ sudo mv screen-master screen
$ sudo chmod +x screen/bin/phantomjs
$ sudo yum install fontconfig
$ sudo yum install freetype*
$ cd screen
$ sudo curl -sS https://getcomposer.org/installer | php
$ sudo php composer.phar update
$ cd ..
$ sudo chown -R apache screen
$ sudo chgrp -R www screen
$ sudo service httpd restart

将浏览器指向screen/demo/shot.php?url=google.com。当看到屏幕截图时,您就完成了。有关更高级设置的讨论可在此处此处进行


3

有许多开源项目可以生成屏幕截图。例如PhantomJS,webkit2png等

这些项目的最大问题是,它们基于较旧的浏览器技术,并且在呈现许多网站时遇到问题,尤其是在过去的几个月/年中,使用webfonts,flexbox,svg以及其他各种HTML5和CSS规范的网站。

我已经尝试了一些第三方服务,其中大多数是基于PhantomJS的,这意味着它们也会产生质量差的屏幕截图。用于生成网站屏幕截图的最佳第三方服务是urlbox.io。这是一项付费服务​​,尽管有7天的免费试用期,可以在不承诺任何付费计划的情况下对其进行测试。

这是文档的链接,下面是简单的步骤,可通过composer在PHP中使用它。

// 1 . Get the urlbox/screenshots composer package (on command line):
composer require urlbox/screenshots

// 2. Set up the composer package with Urlbox API credentials:
$urlbox = UrlboxRenderer::fromCredentials('API_KEY', 'API_SECRET');

// 3. Set your options (all options such as full page/full height screenshots, retina resolution, viewport dimensions, thumbnail width etc can be set here. See the docs for more.)
$options['url'] = 'example.com';

// 4. Generate the Urlbox url
$urlboxUrl = $urlbox->generateUrl($options);
// $urlboxUrl is now 'https://api.urlbox.io/v1/API_KEY/TOKEN/png?url=example.com'

// 5. Now stick it in an img tag, when the image is loaded in browser, the API call to urlbox will be triggered and a nice PNG screenshot will be generated!
<img src="$urlboxUrl" />

例如,这是此页面的完整高度屏幕截图:

https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/8f1666d1f4195b1cb84ffa5f992ee18992a2b35e/png?url=http%3A%2F%2Fstackoverflow.com%2Fquestions%2F757675shot%screen-php-using 2F43652083%2343652083&full_page = true

urlbox.io提供支持的stackoverflow.com问题的完整页面截图


3

有很多选择,它们各有利弊。这是根据实现难度排序的选项列表。

选项1:使用API​​(最简单)

优点

  • 执行Javascript
  • 接近完美的渲染
  • 正确使用缓存选项时快速
  • 规模由API处理
  • 精确的时间,视口,...
  • 大多数时候,他们提供免费计划

缺点

  • 如果您打算大量使用它们,它不是免费的

选项2:使用众多可用库之一

优点

  • 大多数情况下转换速度都非常快

缺点

  • 渲染效果不好
  • 不执行JavaScript
  • 不支持最新的Web功能(FlexBox,高级选择器,Webfonts,Box大小调整,媒体查询,HTML5标签...)
  • 有时安装起来不太容易
  • 规模复杂

选项3:使用PhantomJs以及包装器库

优点

  • 执行Javascript
  • 蛮快

缺点

  • 渲染效果不好
  • PhantomJs已被弃用,不再维护。
  • 不支持最新的Web功能(FlexBox,高级选择器,Webfonts,Box大小调整,媒体查询,HTML5标签...)
  • 规模复杂
  • 如果要加载图像,使其工作起来并不容易...

选项4:使用Chrome Headless,并可能使用包装器库

优点

  • 执行Javascript
  • 接近完美的渲染

缺点

  • 要获得关于以下内容的所需结果并不容易:
    • 页面加载时间
    • 代理整合
    • 自动滚动
    • ...
  • 规模复杂
  • 如果html包含外部链接,则相当慢,甚至更慢

免责声明:我是ApiFlash的创始人。我尽力提供诚实和有用的答案。


2

我在Windows上,因此在阅读完stephan的技巧后,我可以使用imagegrabwindow函数。我添加了裁剪(以摆脱浏览器标题,滚动条等)并调整大小以获取最终图像。这是我的代码。希望能对某人有所帮助。


1

webkit2html可在Mac OS X和Linux上运行,安装和使用都非常简单。请参阅本教程

对于Windows,可以使用具有类似功能的CutyCapt


2
@Smith:我上次检查时,CutyCapt在安装程序中具有所有依赖项。是的,您可能无法使用受限帐户安装此程序,但这就是生活。请注意,所有其他解决方案都在渲染核心周围使用某种包装器,因此您与它们处于同一位置。
Piskvor在2011年

1

我用bluga。该API允许您每月不收费地拍摄100张快照,但有时它在单个页面上使用的信用额度超过1。我刚刚完成了将drupal模块Bluga WebThumbs升级到drupal 7,它允许您在模板或输入过滤器中打印缩略图。

使用此api的主要优点是,如果您使用自适应CSS,它允许您指定浏览器尺寸,所以我正在使用它来获取移动设备和平板电脑布局以及常规布局的渲染。

有适用于以下语言的api客户端:

PHPPythonRubyJava.Net C#PerlBash(shell脚本看起来需要perl)



1

您可以使用https://grabz.it解决方案。

它有一个非常灵活的PHP API,可以通过不同的方式(例如从cronjob或PHP网页)进行调用。

为了实现它,您需要首先获取一个应用程序密钥和机密,然后下载(免费)SDK。

并举例说明。首先初始化:

include("GrabzItClient.class.php");

// Create the GrabzItClient class
// Replace "APPLICATION KEY", "APPLICATION SECRET" with the values from your account!
$grabzIt = new GrabzItClient("Sign in to view your Application Key", "Sign in to view your Application Secret");

和截图示例:

// To take a image screenshot
$grabzIt->URLToImage("http://www.google.com");  
// Or to take a PDF screenshot
$grabzIt->URLToPDF("http://www.google.com");
// Or to convert online videos into animated GIF's
$grabzIt->URLToAnimation("http://www.example.com/video.avi");
// Or to capture table(s)
$grabzIt->URLToTable("http://www.google.com");

接下来是保存。Save如果可以使用可公开访问的回调句柄(SaveTo如果没有),则可以使用两种保存方法之一。有关详细信息,请查阅文档。


如果您要查找全屏屏幕截图,则此提供商需要专业(每年$ 170)订阅。
chaoskreator

1

前几天,我使用Google API编写了一个快速而肮脏的应用程序。肯定有改进的余地...

  • 它使用最新的Google API版本5。
  • 图片大小现在为500px宽
  • 支持桌面和移动视图
  • 保存到指定文件夹中的文件
  • 整合基本的缓存系统

在此处找到实时演示和代码

我之所以没有在此处发布代码,仅仅是因为我在不断完善它,并希望在有时间的时候将其转换为适当的类。


0

我使用了page2images。它是基于cutycapt开发的,它非常快速且稳定。如果您不想在性能和配置上花费太多时间,则应使用它。如果您访问他们的网站,则可以找到更多详细信息和示例PHP代码。


0

经过大量网上冲浪后,我发现了这一点。

PPTRAAS >一个免费工具,可通过将URL作为参数来捕获屏幕截图

他们只需点击其网址即可提供多种选择。

  1. 获取完整的屏幕截图

    https://pptraas.com/screenshot?url= {您在此处输入网址}

  2. 获取特定尺寸的页面截图

    https://pptraas.com/screenshot?url= {您在此处输入网址}&size = 400,400

  3. 甚至可以将页面转换为pdf

    https://pptraas.com/pdf?url= {您在此处输入网址}


乔什(Josh),当我上传答案时,它可以很好地工作,我想我们不能依赖此URL,请找到其他替代方法,因为他们可能已停止了该服务
Fenil Shah,


-1

不直接。诸如Selenium之类的软件具有这样的功能,可以由PHP控制,但具有其他依赖性(例如,在要截屏的浏览器上在计算机上运行其基于Java的服务器)


现在有许多PHP库可供使用。不完全是“ PHP”库。涉及一些js浏览器和代码。
Gijo Varghese,


-1

我发现这是最好,最简单的工具: ScreenShotMachine。这是一项付费服务​​,但是您可以获得100张免费的屏幕截图,还可以花20美元(约20美元)购买另外2,000张,所以这是一笔不错的交易。它的用法非常简单,您只使用一个URL,所以我写了这个小脚本来基于它保存文件:

<?php
  $url = file_get_contents("http://api.screenshotmachine.com/?key={mykey}&url=https://stackoverflow.com&size=X");

  $file = fopen("snapshots/stack.jpg", "w+");
  fwrite($file, $url);
  fclose($file);
  die("saved file!");
?>

他们在这里有一个很好的文档,所以您绝对应该看看。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.