web-dev-qa-db-ja.com

HTMLページのサムネイル画像を生成する方法

いくつかのHTMLページのサムネイル画像を作成しようとしています。これにより、ユーザーはリンクを開く前にHTMLがどのように表示されるかを理解できます。オンラインで検索しましたが、有用なものは見つかりませんでした。

ここに誰かがいくつかのヒントを提供できますか？本当にありがとう！

これをサーバー側で発生させたいので、クライアントがページをロードする必要はありません

javascripthtmlcssimage
21
Rouge

次のURLを確認してください： http://html2canvas.hertzen.com/ 。

このスクリプトを使用して、ページをクライアント側のキャンバスに変換できます。

次に、それをサムネイルとして使用できます。

26
Brian McCutchon

http://phantomJs.org は、ファイルからローカルにHTMLをキャプチャするための無料のツールを提供します（コマンドラインパラメーターを介して有効にし、file:// URIスキーム）またはWebサイトからそれを画像にレンダリングします。これは非常に定評のある非常に人気のあるツールです。自動テストを作成する人も使用します。そのツールと同様のものをカバーするwikiページがあります。

トリミングオプションがあります。その出力を他の画像操作ツールで実行して、スケーリングすることができます。

TwitterやFacebookのようなインテリジェントなプレビュー/サムネイルを取得する限り、私にはわかりません。 Twitterや他のサイトが提供する人気のあるoEmbedプロトコルと、独自の小さなHTMLファイルを作成して画像にレンダリングできるメタデータを抽出する方法があることは知っています。

（phantomJsに関する注意：レンダリングされた画像で希望する画質が得られない場合は、画像パラメーターの品質設定を100に上げてみてくださいページのズーム係数オプションを増やすだけでなく、2のズーム係数がズームよりもはるかに優れた品質を生成することがわかりましたファクター1-ズームに関するAPIドキュメントを参照してください）。

4
clearlight

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

私はそれらが助けてくれることを願っています！

2
dk-pramis

ヘッダータグで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>
0
Nasser Hadjloo

何らかの理由で私のサイトでphantomjsを機能させることができませんでした。さらに検索を行ったところ、これに遭遇しました iframeを使用してサムネイルをシミュレートする手法 。他の人が便利だと思う場合に備えて、ここに投稿してください。

0
Witt