如何生成 HTML 页面的缩略图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16325655/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to generate thumbnail images of HTML pages
提问by Rouge
I am trying to create thumbnail images for several HTML pages, so the user can have an idea of what the HTML looks like before they open the link. I have searched online but haven't found anything useful.
我正在尝试为多个 HTML 页面创建缩略图，以便用户可以在打开链接之前了解 HTML 的外观。我在网上搜索过，但没有找到任何有用的东西。
Could anyone here provide some tips? Thanks so much!
这里有人可以提供一些提示吗？非常感谢！
I specifically want this to happen on the server side so the client is not required to load the page
我特别希望这发生在服务器端，所以客户端不需要加载页面
回答by Brian McCutchon
You might want to check out this url: http://html2canvas.hertzen.com/.
您可能想查看此网址：http: //html2canvas.hertzen.com/。
Using this script, you can convert the page into a canvas on the client side.
使用此脚本，您可以将页面转换为客户端的画布。
Then you can use that as your thumbnail.
然后您可以将其用作缩略图。
回答by clearlight
http://phantomJs.orgoffers a free tool to capture HTML locally from a file (if you enable that via a command line parameter and use the file://URI scheme) or from a website and render it to an image. That is a very well-established very popular tool It's also used by people who write automated tests. There's a wiki page that covers that tool, and similar ones.
http://phantomJs.org提供了一个免费工具，可以从文件（如果您通过命令行参数启用该功能并使用file://URI 方案）或从网站在本地捕获 HTML并将其呈现为图像。这是一个非常完善的非常流行的工具它也被编写自动化测试的人使用。有一个涵盖该工具和类似工具的 wiki 页面。
It has a cropping option. You could run the output of that through other image manipulation tools to scale it.
它有一个裁剪选项。您可以通过其他图像处理工具运行它的输出以对其进行缩放。
As far as getting intelligent previews/thumbnails like Twitter and Facebook do, that I'm not sure of. I know there is an oEmbed protocol that is popular that Twitter and other sites provide, and ways to extract the metadata whereby you could possibly construct your own small HTML file and then render it to an image.
至于像 Twitter 和 Facebook 这样的智能预览/缩略图，我不确定。我知道 Twitter 和其他网站提供了一种流行的 oEmbed 协议，以及提取元数据的方法，您可以借此构建自己的小型 HTML 文件，然后将其呈现为图像。
(Note about phantomJs: If you don't get the image quality you want in the rendered image, try raising the quality setting for the image parameter to 100, as well asincreasing the page's zoom factor option. I've found zoom factor of 2produces profoundly better quality than zoom factor 1 - see the API docs regarding zoom).
（关于 phantomJs 的注意事项：如果在渲染图像中没有获得所需的图像质量，请尝试将图像参数的质量设置提高到 100，并增加页面的缩放系数选项。我发现缩放系数为2产生比缩放因子 1 更好的质量 - 请参阅有关缩放的 API 文档）。
回答by dk-pramis
http://api.s-shot.ru/?=(your url)and
https://s.wordpress.com/mshots/v1/(your url)
http://api.s-shot.ru/?=(your url)和
https://s.wordpress.com/mshots/v1/(your url)
I hope those Help!
我希望那些帮助！
回答by Nasser Hadjloo
You have to use Open Graph tags in you header tag
您必须在标题标签中使用 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>
回答by Witt
I couldn't get phantomjs to work for my site for some reason, and in further searching I stumbled on this technique for using an iframe to simulate a thumbnail. Posting this here in case others find it useful.
由于某种原因，我无法让 phantomjs 为我的网站工作，在进一步的搜索中，我偶然发现了这种使用 iframe 模拟缩略图的技术。在这里发布以防其他人发现它有用。
