如何使用 Rails 3.1 截取网站的屏幕截图？ -- 不使用服务答案

【问题标题】：How to take screenshot of a website with Rails 3.1? -- without using a service如何使用 Rails 3.1 截取网站的屏幕截图？ -- 不使用服务
【发布时间】：2011-11-21 21:03:15
【问题描述】：

几乎每个答案我都使用一些现有服务找到了参考。 有没有办法以编程方式使用 Rails 3.1 做到这一点？ 用 PHP 很容易做到这一点（PHP 中有预建的库可以做到这一点）。

给定一个 URL，我想要做的是：

截取网站截图
裁剪（只取最左上角的 100x100 像素

PS。这是我的环境：Rails 3.1、Ruby 1.9.2

注意：该解决方案可能还需要遵循 URL 上的任何重定向。

更新：

我见过 https://github.com/topfunky/osxscreenshot 问题是它需要旧版本的 Ruby (1.8.x)，并且只能在我的开发 Mac 机器上运行。
我已经看到了 Wordpress 的漏洞（他们的服务不做任何可能有人滥用的速率限制）。我不想为了我的利益滥用他们的资源...http://s.wordpress.com/mshots/v1/http%3A%2F%2Fstackoverflow.com%2F?w=500
使用http://rmagick.rubyforge.org/ 或https://github.com/thoughtbot/paperclip 可以轻松进行裁剪

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-3.1 screenshot webpage-screenshot

【解决方案1】：

这个任务有一个 Rails gem。

 gem install selenium-webdriver

简单用例：

require 'selenium-webdriver'
 width = 1024
 height = 728
 driver = Selenium::WebDriver.for :firefox
 driver.navigate.to 'http://domain.com'
 driver.execute_script %Q{
   window.resizeTo(#{width}, #{height});
 }
 driver.save_screenshot('/tmp/screenshot.png')
 driver.quit

【讨论】：

聪明的解决方案，虽然我认为它需要安装在安装了这些浏览器的客户端上，因为我在服务器端这样做时遇到了麻烦。
注意execute_script部分要替换成driver.manage.window.resize_to(width,height)
这行得通！但是如何在我的 linux 服务器上执行相同的脚本（没有浏览器）？

【解决方案2】：

这可能会有所帮助：https://github.com/csquared/IMGKit

【讨论】：

它依赖于许多平台（包括Mac）不可用的wkhtmltoimage
wkhtmltoimage 在 Mac 上可用。

【解决方案3】：

您可以使用 wkhtmltoimage 加载网页并将其保存为图像，然后使用 imagemagick（或其中一个 ruby 包装器）对其进行裁剪。

wkhtmltoimage www.google.com output.jpg
convert -crop 100x100+0+100 output.jpg cropped.jpg

虽然没有用于 OSX 的预构建 wkhtmltoimage 二进制文件，所以您可能希望使用 wkhtmltopdf 代替，然后使用 imagemagick 转换为图像。

wkthmltopdf www.google.com output.pdf
convert -crop 100x100+0+100 output.pdf cropped.jpg

【讨论】：

wkthmltopdf 的呈现对大多数网站来说似乎很糟糕:(否则这将是可行的方法。
@user1049097 我从来没有遇到过问题。也许您没有足够的字体或支持 QT 的构建。
我将在 mac 上再试一次，看看是否缺少任何字体等。谢谢！

【解决方案4】：

一个简单的，但仅限 Mac，解决方案似乎是 http://www.paulhammond.org/webkit2png/

只需 chmod -x 该脚本并用作 python webkit2png http://www.google.com/ 并创建 3 个文件：

完整截图
网站顶部的缩略图
完整截图的缩略图

【讨论】：