我正在尝试为几个HTML页面创建缩略图，以便用户可以在打开链接之前了解HTML的外观。我已经在网上搜索过了，但没有找到任何有用的信息。
请问有人可以提供一些技巧吗？非常感谢！
我特别希望这在服务器端完成，这样客户端就不需要加载页面。
如何生成HTML页面的缩略图
35
- Rouge
7
重复的问题：https://dev59.com/d2035IYBdhLWcg3wGMHa - Jalayn
2这不是重复问题，因为这个问题是关于在用户加载页面之前生成图像，而另一个问题是关于在客户端生成屏幕截图，因此用户必须先访问页面。 - coma
也许是 https://dev59.com/b1bUa4cB1Zd3GeqPCM82 的一个副本，但 Rouge，你能提供更多有关你的服务器端的信息吗？ - coma
这个链接可能对那些想要执行类似功能的人有所帮助。https://dev59.com/BW445IYBdhLWcg3wWI6L - Carson
这回答解决了你的问题吗？使用HTML5/Canvas/JavaScript在浏览器中进行截屏 - Theofilos Papapanagiotou
显示剩余2条评论
5个回答
27
- Brian McCutchon
4
3如果是因为他说他想把它放在服务器端，那是我发布之后他才加上去的，如果我没有记错的话。我会把这个问题留给其他有类似问题的人来解决。 - Brian McCutchon
有些人恶意或无意地把他们的不满转化成攻击性言论。这让我想起了一些情况，如果承运人搞砸了运输，人们会给产品评一个1星级评论，好像这与产品本身有关系。 - clearlight
1没有缩放功能，所以当设置宽度和高度时，我会得到整个页面。如果只设置宽度和高度获取图像的一部分有什么意义呢？ - Carlitos
@Carlitos，是的，我因为这个原因投了反对票。我认为这必须在答案中，因为当我下载它并希望有缩放选项时，我只是浪费了时间。只有整个页面选项而没有缩放（裁剪是无用的），太荒谬了。 - ratojakuf
8
你必须在头部标签中使用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>
- Nasser Hadjloo
6
http://api.s-shot.ru/?=(你的url)
和
https://s.wordpress.com/mshots/v1/(你的url)
希望这些可以帮到你！
- dk-pramis
4
http://phantomJs.org提供了一个免费的工具，可以从文件（如果您通过命令行参数启用并使用file:// URI方案）或网站捕获HTML，并将其渲染为图像。这是一个非常成熟和广受欢迎的工具。自动化测试的人也会使用它。有一个Wiki页面涵盖该工具以及类似的工具。
它还有裁剪选项。您可以将其输出运行到其他图片处理工具中进行缩放。
至于像Twitter和Facebook那样获得智能预览/缩略图，我不确定。我知道有一个受欢迎的oEmbed协议，Twitter和其他网站提供了这种协议，并且有一些方法可以提取元数据，从而可能构建自己的小型HTML文件，然后将其渲染到图像上。
（关于phantomJs的注意事项：如果您在呈现的图像中没有获得所需的图像质量，请尝试将图像参数的质量设置提高到100，并增加页面缩放因子选项。我发现2倍缩放因子比1倍缩放因子产生了更好的效果-请参见API文档有关缩放的内容）。
- clearlight
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接