HTML5キャンバスの例スクリーンショット

Question

私は以前の質問のおかげでhtml2canvasに出くわしました。私が混乱していることは、以下を行うためにそれを実装する方法です。

1. ライブウェブサイトのライブサムネイルを作成します。
2. ライブサムネイルをクリックすると、ウェブサイトの大きな画像が読み込まれます。
3. URLをスクリプトに入力するにはどうすればよいでしょうか？

すべての画像は、特定のクラスの画像タグまたはCSSに特定のhxwが設定されます。

Answer 1

サムネイルを作成しようとしているウェブサイトが実際のページと異なる場合は、まずそのページのHTMLをサーバーにダウンロードする必要があります。それをiframeの中にラップし、そのスクリーンショットを作成します。

生成されるスクリーンショットは実際のサイトと1：1のサイズになるため、サムネイルを作成するにはスクリーンショットのサイズを変更する必要があります。

スクリプトは、ページのレンダリングの入力として、HTML、URL、またはDOM要素以外の何かを受け入れません。そのため、スクリプトを使用してスクリーンショットを生成できる唯一の方法は、スクリーンショットを生成するページにロードするか、iframe内にページをロードすることです（同じオリジンの下でダウンロードする必要があります）クロスオリジンを使用する場合は、プロキシ経由のソース）。