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
我特别希望这在服务器端发生,因此客户端不需要加载页面
5 个解决方案
#1
22
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
4
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. 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提供了一个免费工具,用于从文件本地捕获HTML(如果通过命令行参数启用它并使用file:// URI方案)或从网站捕获并将其呈现为图像。这是一个非常成熟的非常受欢迎的工具。它也被编写自动化测试的人使用。有一个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这样的智能预览/缩略图,我不确定。我知道有一个受欢迎的oEmbed协议,Twitter和其他网站提供,以及提取元数据的方法,您可以构建自己的小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).
(关于幻像的注意事项:如果在渲染图像中没有获得所需的图像质量,请尝试将图像参数的质量设置提高到100,并增加页面的缩放系数选项。我发现缩放系数为2产生的质量远远超过缩放系数1 - 请参阅有关缩放的API文档。
#3
1
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
-1
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模拟缩略图的这种技术。发布此处以防其他人发现它有用。
#5
-3
check following link: very useful.
检查以下链接:非常有用。
http://www.iminfo.in/post/how-to-create-thumbnail-image-using-html5-canvas-and-javascript
#1
22
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
4
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. 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提供了一个免费工具,用于从文件本地捕获HTML(如果通过命令行参数启用它并使用file:// URI方案)或从网站捕获并将其呈现为图像。这是一个非常成熟的非常受欢迎的工具。它也被编写自动化测试的人使用。有一个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这样的智能预览/缩略图,我不确定。我知道有一个受欢迎的oEmbed协议,Twitter和其他网站提供,以及提取元数据的方法,您可以构建自己的小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).
(关于幻像的注意事项:如果在渲染图像中没有获得所需的图像质量,请尝试将图像参数的质量设置提高到100,并增加页面的缩放系数选项。我发现缩放系数为2产生的质量远远超过缩放系数1 - 请参阅有关缩放的API文档。
#3
1
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
-1
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模拟缩略图的这种技术。发布此处以防其他人发现它有用。
#5
-3
check following link: very useful.
检查以下链接:非常有用。
http://www.iminfo.in/post/how-to-create-thumbnail-image-using-html5-canvas-and-javascript