Question

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

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

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

Answer 1

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

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

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

Answer 2

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

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

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

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

Answer 3

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

我希望那些帮助！

Answer 4

您必须在标头标记中使用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>

Answer 5

由于某种原因，我无法让phantomjs为我的网站工作，而在进一步搜索中我偶然发现了technique for using an iframe to simulate a thumbnail。将此发布在其他人认为有用的地方。

Answer 6

检查以下链接：非常有用。

http://www.iminfo.in/post/how-to-create-thumbnail-image-using-html5-canvas-and-javascript

如何生成HTML页面的缩略图

6 个答案: