8

JavaScript での URL プレビューの作成を手伝ってくれる人はいますか?

つまり、自分のサイトにリンクがあるとします。ユーザーがリンクにマウス カーソルを合わせると、リンクのターゲットがどのように見えるかを示す画像がポップアップ表示されるようにしたいとします。

CSS について心配する必要はありません。画像を表示するための実際のスクリプトが必要なだけです。

現在、実際にページをレンダリングするiframeを表示することでそれを行っていますが、これはスケーラブルではなく、見苦しく見えます。

リンクは動的に生成されたユーザー コンテンツにリンクするため、事前に作成された画像をページに表示することはできません。

4

7 に答える 7

5

事前に保存された画像が必要です。Javascript は、スクリーンショットを撮ったり、画像のサイズを変更したりすることはできません (今のところ)。これを試してみてください: http://snapcasa.com/。画像を動的に取得します。あなたがしなければならないのは、画像をホットリンクすることだけです:)

http://snapcasa.com/を使用する場合の最高の機能:

  1. 画像は最新であることが保証されています

  2. サーバーに保存する必要はありません。

  3. 無料プランには、消費できるクレジットがたくさんあります!

于 2010-04-26T18:13:45.860 に答える
3

ダニエルの言うとおり、クライアントがこれを行う方法はありませんが、オプションとして無料のサムネイル サービスがあります。http://www.webresourcesdepot.com/10-free-website-thumbnail-generation-services/と素敵なツールチップ スクリプトを組み合わせたもの: http://flowplayer.org/tools/tooltip.html

于 2010-04-26T18:17:08.547 に答える
3

スクリーンショットをより直接的に制御し、サーバー上で設定を行いたい場合は、コマンド ラインでkhtml2pngまたはwebkit2png * を設定して画像を生成できます。( Gecko を使用したい場合は、ここにいくつかの方向性があります。)

* webkit2png は OS X 用の手順を提供しますが、WebKit 自体がクロスプラットフォームであるため、* nix で動作しない理由はありません。それを理解することは読者の演習として残すことができますが、KHTML は歴史的に新しい (HTML5、CSS3 など) 機能に関して WebKit に遅れをとっているため、価値があるかもしれません。

私はこれらのソリューションをテストしていませんが、スクリーンショットの生成をより詳細に制御したい場合は、開始するのに十分かもしれません.

于 2010-04-26T18:24:44.180 に答える
2

Web サイトのプレビューは、クライアント側では生成できません。プレビュー画像はサーバー上でレンダリングする必要があり、簡単な<img>タグを使用して HTML ドキュメントに呼び出すことができます。

基本的に、次のようなイメージ タグを使用できます。

<img src="/my_preview_renderer.php?site=www.google.com" />

... wheremy_preview_renderer.phpはリアルタイムでプレビューを生成し、適切な MIME タイプで画像データを返します。サーバー側の任意のスクリプト言語を使用できます。

これは網羅的な答えではありませんが、正しい方向に向けられることを願っています。

于 2010-04-26T18:13:19.407 に答える
1

iframe を使用してこれを行うか、スクリーンショットを撮るサービスに料金を支払うことができます (Doctype.com はこれを提供していると思います)。有料サービスでは、スクリーンショットの生成にまだ時間がかかります。基本的に、試してみないでください。うまくいきません。

于 2010-04-26T18:12:45.503 に答える
1

さて、ここでのすべての回答は少し古いので、現在のほとんどのブラウザーに組み込まれている web-kit ツールを使用してこれを行うことができます。

于 2014-08-29T03:02:43.050 に答える