34

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.

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

Chris O'Kelly
  • 1,863
  • 2
  • 18
  • 35
Rouge
  • 4,181
  • 9
  • 28
  • 36
  • duplicate of http://stackoverflow.com/q/5621907/866172 – Jalayn May 01 '13 at 20:14
  • 2
    Is not a duplicate since this question is about generating an image before the user even load the page, the other one is about generating screenshots on the client side, so, the user must visit the page first. – coma May 01 '13 at 21:32
  • Well, maybe is a duplicate of http://stackoverflow.com/questions/5873184/how-do-you-create-an-image-of-a-web-page-in-php but Rouge, can you provide more info about your server side? – coma May 01 '13 at 21:37
  • I believe the right way, using jQuery, would be to something like, create a HTML5 canvas over the fetched HTML and then convert the canvas area into dataURL so that it is accessible as image. This is just a theory though and I can confirm only after I've done that. – Sayed Dec 27 '17 at 05:39
  • This link may be of some use to those who want to do similar functions. https://stackoverflow.com/q/4912092/9935654 – Carson Sep 10 '21 at 09:34
  • Does this answer your question? [Using HTML5/Canvas/JavaScript to take in-browser screenshots](https://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-in-browser-screenshots) – Theofilos Papapanagiotou Sep 10 '21 at 10:08
  • I also made the same flag before. Then I deleted it. I think the two are not precisely the same. This side also needs to consider how to get the content of different tags. And if it helps, I think the person who asked the question will give the best answer. – Carson Sep 12 '21 at 08:30

5 Answers5

26

You might want to check out this url: 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.

Brian McCutchon
  • 8,354
  • 3
  • 33
  • 45
  • 3
    And if it's because he said he wanted it on the server side, he added that after I posted, if I'm not mistaken. I'll leave this for others with a similar question. – Brian McCutchon May 01 '13 at 23:40
  • Amen. Some wittingly or unwittingly malicious people who can't put their gripes into perspective. Reminds me somehow of cases where people give a 1-star review for a product if the carrier botched the shipping, as though that has something to do with the product itself. – clearlight Jul 21 '17 at 18:54
  • 1
    There is no zoom functionality so i get the entire page when setting the width and height. Whats the point of getting just a piece of the image when setting the width and height? – Carlitos Oct 18 '17 at 17:04
  • @Carlitos, yes, I downvoted for this reason. I think this must be in answer because I just wasted my time when download this and hope that there is zoom option. So ridiculous to have just entire page option without zoom(croping is useless). – ratojakuf Feb 14 '19 at 17:16
8

You have to use Open Graph tags in you header tag:

<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>
Philippe Fanaro
  • 6,148
  • 6
  • 38
  • 76
Nasser Hadjloo
  • 12,312
  • 15
  • 69
  • 100
6

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

I hope those Help!

dk-pramis
  • 109
  • 2
  • 8
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.

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.

(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).

clearlight
  • 12,255
  • 11
  • 57
  • 75
0

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.

Witt
  • 477
  • 4
  • 11