如何生成 HTML 页面的缩略图

Posted 2023-03-06

技术标签:

【中文标题】如何生成 HTML 页面的缩略图【英文标题】：How to generate thumbnail images of HTML pages 【发布时间】：2013-04-25 21:27:28 【问题描述】：

我正在尝试为多个 html 页面创建缩略图，以便用户在打开链接之前了解 HTML 的外观。我在网上搜索过，但没有找到任何有用的东西。

这里有人可以提供一些提示吗？非常感谢！

我特别希望这发生在服务器端，因此客户端不需要加载页面

【问题讨论】：

与***.com/q/5621907/866172重复不是重复的，因为这个问题是关于在用户加载页面之前生成图像，另一个是关于在客户端生成屏幕截图，因此，用户必须先访问页面。好吧，可能是 ***.com/questions/5873184/… 的副本，但是 Rouge，你能提供更多关于你的服务器端的信息吗？我相信使用 jQuery 的正确方法是在获取的 HTML 上创建一个 HTML5 画布，然后将画布区域转换为 dataURL，以便它可以作为图像访问。不过，这只是一个理论，我只有在完成之后才能确认。此链接可能对那些想做类似功能的人有些用处。 ***.com/q/4912092/9935654 【参考方案1】：

您可能想查看此网址：http://html2canvas.hertzen.com/。

使用此脚本，您可以在客户端将页面转换为画布。

然后您可以将其用作缩略图。

【讨论】：

如果是因为他说他想要在服务器端，他在我发布后补充说，如果我没记错的话。我会把这个留给其他有类似问题的人。阿门。一些有意或无意的恶意人士，他们无法正确看待自己的抱怨。以某种方式提醒我，如果承运人在运输过程中搞砸了，人们会给产品打 1 星评价，好像这与产品本身有关。没有缩放功能，所以在设置宽度和高度时我会得到整个页面。设置宽度和高度时只获取一张图像有什么意义？ @Carlitos，是的，出于这个原因，我投了反对票。我认为这必须是答案，因为我只是在下载这个时浪费了我的时间，并希望有缩放选项。没有缩放只有整个页面选项真是太荒谬了（裁剪是没用的）。【参考方案2】：

http://phantomJs.org 提供了一个免费工具，可以从文件本地捕获 HTML（如果您通过命令行参数启用它并使用 file:// URI 方案）或从网站捕获 HTML 并将其呈现为图像。这是一个非常完善的非常流行的工具。编写自动化测试的人也使用它。有一个 wiki 页面涵盖了该工具和类似的工具。

它有一个裁剪选项。您可以通过其他图像处理工具运行它的输出来缩放它。

至于获得像 Twitter 和 Facebook 这样的智能预览/缩略图，我不确定。我知道 Twitter 和其他网站提供了一个流行的 oEmbed 协议，以及提取元数据的方法，您可以构建自己的小型 HTML 文件，然后将其呈现为图像。

（关于 phantomJs 的注意事项：如果您在渲染的图像中没有获得您想要的图像质量，请尝试将图像参数的质量设置提高到 100，以及增加页面的缩放系数选项。我发现缩放系数为 2 比缩放系数 1 产生的质量要好得多 - 请参阅有关缩放的 API 文档）。

【讨论】：

【参考方案3】：

http://api.s-shot.ru/?=(your url) 和 https://s.wordpress.com/mshots/v1/(your url)

我希望那些帮助！

【讨论】：

【参考方案4】：

由于某种原因，我无法让 phantomjs 为我的网站工作，在进一步搜索中，我偶然发现了这个 technique for using an iframe to simulate a thumbnail。在这里发布以防其他人发现它有用。

【讨论】：

【参考方案5】：

你必须在你的标题标签中使用Open Graph标签：

<html>
  <head>
    <meta property="og:site_name" content="Your Website Name Here" />
    <meta
      property="og:title"
      content="Yourtitle goes here, about 90 characters in length."
    />
    <meta
      property="og:description"
      content="description of URL that is about 300 characters in length."
    />
    <meta property="og:image" content="YOURIMAGEURL.JPG" />
    <meta property="og:type" content="blog" />
    <meta property="og:url" content="http://yourURL.com/" />
  </head>
  <body></body>
</html>

【讨论】：

以上是关于如何生成 HTML 页面的缩略图的主要内容，如果未能解决你的问题，请参考以下文章