如何生成 HTML 頁面的縮略圖

Question

我正在嘗試為多個 HTML 頁面創建縮略圖，以便用戶可以在打開鏈接之前了解 HTML 的外觀。 我在網上搜索過，但沒有找到任何有用的東西。

這里有人可以提供一些提示嗎？ 非常感謝！

我特別希望這發生在服務器端，所以客戶端不需要加載頁面

Answer 1

您可能想查看此網址： http : //html2canvas.hertzen.com/ 。

使用此腳本，您可以將頁面轉換為客戶端的畫布。

然后您可以將其用作縮略圖。

Answer 2

您必須在標題標簽中使用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>

Answer 3

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

我希望那些幫助！

Answer 4

http://phantomJs.org提供了一個免費工具，可以從文件（如果您通過命令行參數啟用它並使用file:// URI 方案）或從網站在本地捕獲 HTML 並將其呈現為圖像。 這是一個非常完善的非常流行的工具它也被編寫自動化測試的人使用。 有一個涵蓋該工具和類似工具的 wiki 頁面。

它有一個裁剪選項。 您可以通過其他圖像處理工具運行它的輸出以對其進行縮放。

至於像 Twitter 和 Facebook 這樣的智能預覽/縮略圖，我不確定。 我知道 Twitter 和其他網站提供了一種流行的 oEmbed 協議，以及提取元數據的方法，您可以借此構建自己的小型 HTML 文件，然后將其呈現為圖像。

（關於 phantomJs 的注意事項：如果在渲染圖像中沒有獲得所需的圖像質量，請嘗試將圖像參數的質量設置提高到 100，並增加頁面的縮放系數選項。我發現縮放系數為2產生比縮放因子 1 更好的質量 - 請參閱有關縮放的 API 文檔）。

Answer 5

由於某種原因，我無法讓 phantomjs 為我的網站工作，在進一步的搜索中，我偶然發現了這種使用 iframe 模擬縮略圖的技術。 在這里發布以防其他人發現它有用。

Answer 6

檢查以下鏈接：非常有用。

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

如何生成 HTML 頁面的縮略圖

問題描述

5 個解決方案

解決方案1
25 2013-05-01 22:52:45

解決方案2
6 2020-02-26 08:45:45

解決方案3
5 2017-10-28 11:43:39

解決方案4
4 2017-03-27 15:00:09

解決方案5
0 2018-05-31 20:48:26

解決方案6
-2 2013-08-29 06:42:01

如何生成 HTML 頁面的縮略圖

問題描述

5 個解決方案

解決方案1 25 2013-05-01 22:52:45

解決方案2 6 2020-02-26 08:45:45

解決方案3 5 2017-10-28 11:43:39

解決方案4 4 2017-03-27 15:00:09

解決方案5 0 2018-05-31 20:48:26

解決方案6 -2 2013-08-29 06:42:01

解決方案1
25 2013-05-01 22:52:45

解決方案2
6 2020-02-26 08:45:45

解決方案3
5 2017-10-28 11:43:39

解決方案4
4 2017-03-27 15:00:09

解決方案5
0 2018-05-31 20:48:26

解決方案6
-2 2013-08-29 06:42:01