How to create thumbnails of images of HTML pages

Question

I'm trying to create thumbnails for multiple HTML pages, so the user may have an idea of ​​what the HTML looks like before opening the link. I searched on the Internet but did not find anything useful.

Can anyone here give some advice? Thank you very much!

I specifically want this to happen on the server side, so the client does not need to load the page

Answer 1

You might want to check out this URL: http://html2canvas.hertzen.com/ .

Using this script, you can convert the page to canvas on the client side.

Then you can use this as a thumbnail.

Answer 2

http://phantomJs.org offers a free tool for locally capturing HTML from a file (if you include it using the command line option and use file:// URI) or from a website and attribute it to the image. This is a very well-established very popular tool. It is also used by people who write automated tests. There is a wiki page that covers this tool and similar ones.

It has a crop option. You can run the output of this using other image processing tools to scale it.

As for getting smart previews / thumbnails like Twitter and Facebook, I'm not sure. I know that there is a popular oEmbed protocol that is available on Twitter and other sites, as well as ways to extract metadata, with which you could create your own small HTML file and then display it on the image.

(Note about phantomJs: If you don’t get the required image quality in the image, try increasing the quality setting for the image parameter to 100, and by increasing the page zoom factor, a zoom factor of 2 gives significantly better quality than a zoom factor of 1 - see the API docs for scaling )

Answer 3

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

I hope this help!

Answer 4

check the following link: very useful.

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