2013-05-01 167 views
12

我正在嘗試爲多個HTML頁面創建縮略圖圖像,因此用戶可以在打開鏈接之前瞭解HTML的外觀。我在網上搜索,但沒有發現任何有用的東西。如何生成HTML頁面的縮略圖圖像

這裏有人可以提供一些提示嗎?非常感謝!

我特別希望這使加載頁面

+0

http://stackoverflow.com/q/5621907/866172 – Jalayn 2013-05-01 20:14:05

+0

的副本不是重複的,因爲這個問題是關於在用戶甚至加載頁面之前生成圖像,另一個是關於在客戶端生成屏幕截圖,所以用戶必須先訪問該頁面。 – coma 2013-05-01 21:32:06

+0

好吧,也許是http://stackoverflow.com/questions/5873184/how-do-you-create-an-image-of-a-web-page-in-php重複,但胭脂,你能提供更多有關您的服務器端的信息? – coma 2013-05-01 21:37:37

回答

18

你可能想看看這個網址,不需要在客戶端上發生在服務器端:http://html2canvas.hertzen.com/

使用此腳本,可以將頁面轉換爲客戶端的畫布。

然後你可以使用它作爲你的縮略圖。

+4

不管誰低估,你應該說爲什麼...... – 2013-05-01 23:15:01

+3

如果是因爲他說他想在服務器端,他補充說,我發佈後,如果我沒有錯。我會留下這個給其他人一個類似的問題。 – 2013-05-01 23:40:00

+0

阿門。一些有意或無意的惡意人士,他們不能把自己的抱怨放在眼裏。如果運輸公司對運輸產品進行了拙劣的處理,那麼人們會對產品進行一星評估,這與產品本身有關。 – clearlight 2017-07-21 18:54:00

3

http://phantomJs.org提供了一個免費的工具,從一個文件在本地捕獲HTML(如果你啓用通過命令行參數,並使用file:// URI方案),或從一個網站,它渲染的圖像。這是一個非常成熟的非常受歡迎的工具它也被編寫自動化測試的人員使用。有一個涵蓋該工具的wiki頁面,以及類似的頁面。

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

就像獲取Twitter和Facebook等智能預覽/縮略圖一樣,我不確定。我知道Twitter和其他網站提供了流行的oEmbed協議,以及提取元數據的方法,從而可以構建自己的小型HTML文件,然後將其呈現給圖像。

(備註phantomJs:如果你沒有得到你所呈現的圖像中想要的圖像質量,嘗試提高了圖像參數的質量設置爲100,以及增加頁面的縮放比例選項。我發現的縮放因子爲2可以產生比縮放因子1更好的質量 - 請參閱關於縮放的API文檔)。

1

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

我希望那些幫助!

+0

你downvote ..你應該說爲什麼傢伙........ – 2017-11-01 14:53:35