如何生成 HTML 页面的缩略图
[英]How to generate thumbnail images of HTML pages
问题描述
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.
我正在尝试为多个 HTML 页面创建缩略图，以便用户可以在打开链接之前了解 HTML 的外观。 I have searched online but haven't found anything useful.我在网上搜索过，但没有找到任何有用的东西。
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我特别希望这发生在服务器端，所以客户端不需要加载页面
5 个解决方案
解决方案1
25 2013-05-01 22:52:45
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.然后您可以将其用作缩略图。
解决方案2
6 2020-02-26 08:45:45
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>
解决方案3
5 2017-10-28 11:43:39
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!我希望那些帮助！
解决方案4
4 2017-03-27 15:00:09
http://phantomJs.org offers 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. http://phantomJs.org提供了一个免费工具，可以从文件（如果您通过命令行参数启用它并使用file:// URI 方案）或从网站在本地捕获 HTML 并将其呈现为图像。 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.有一个涵盖该工具和类似工具的 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.至于像 Twitter 和 Facebook 这样的智能预览/缩略图，我不确定。 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 和其他网站提供了一种流行的 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 as increasing the page's zoom factor option. I've found zoom factor of 2 produces profoundly better quality than zoom factor 1 - see the API docs regarding zoom). （关于 phantomJs 的注意事项：如果在渲染图像中没有获得所需的图像质量，请尝试将图像参数的质量设置提高到 100，并增加页面的缩放系数选项。我发现缩放系数为2产生比缩放因子 1 更好的质量 - 请参阅有关缩放的 API 文档）。
解决方案5
0 2018-05-31 20:48:26
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 .由于某种原因，我无法让 phantomjs 为我的网站工作，在进一步的搜索中，我偶然发现了这种使用 iframe 模拟缩略图的技术。 Posting this here in case others find it useful.在这里发布以防其他人发现它有用。
解决方案6
-2 2013-08-29 06:42:01
check following link: very useful. 检查以下链接：非常有用。
http://www.iminfo.in/post/how-to-create-thumbnail-image-using-html5-canvas-and-javascript http://www.iminfo.in/post/how-to-create-thumbnail-image-using-html5-canvas-and-javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.