32

我正在尝试为几个 HTML 页面创建缩略图，因此用户可以在打开链接之前了解 HTML 的外观。我在网上搜索过，但没有发现任何有用的东西。

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

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

4

5 回答 5

25

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

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

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

于 2013-05-01T22:52:45.277 回答
7

您必须在标题标签中使用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>
于 2020-02-26T08:45:45.790 回答
6

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

我希望那些帮助！

于 2017-10-28T11:43:39.953 回答
4

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

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

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

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

于 2017-03-27T15:00:09.637 回答
0

由于某种原因，我无法让 phantomjs 为我的网站工作，在进一步搜索中，我偶然发现了这种使用 iframe 模拟缩略图的技术。在这里发布，以防其他人发现它有用。

于 2018-05-31T20:48:26.720 回答