发表新帖
发表新帖

How to generate thumbnail images of HTML pages

前端 未结
关注
5 440
情书的邮戳
情书的邮戳 2021-01-31 04:21

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 hav

相关标签:
5条回答
  • 傲寒
    2021-01-31 04:44

    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>
    0 讨论(0)
  • 误落风尘
    2021-01-31 04:45

    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.

    0 讨论(0)
  • 失恋的感觉
    2021-01-31 04:46

    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.

    0 讨论(0)
  • 天命终不由人
    2021-01-31 04:52

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

    I hope those Help!

    0 讨论(0)
  • 礼貌的吻别
    2021-01-31 05:06

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

    0 讨论(0)
 看不清?
提交回复
热议问题