ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript は Web ページのスクリーンショットを実装します。 function_javascript スキル
JavaScript を使用してスクリーンショットを撮る場合、ここでは 2 つのオープン ソース コンポーネントをお勧めします。1 つは Canvas2Image で、Canvas の描画を PNG/JPEG/BMP 画像にプログラムできますが、それだけでは十分ではありません。 DOM (少なくとも大部分) のスクリーンショットを撮るには、DOM オブジェクトを Canvas オブジェクトに変換できる html2canvas が必要です。 2 つの機能を組み合わせると、ページ上の DOM を PNG または JPEG 画像にスクリーンショットすることができます。これは非常に優れています。
Canvas2Image
原則は、HTML5 キャンバス オブジェクトを使用して toDataURL() API を提供することです。
しかし、現在多くの欠陥があります。たとえば、Opera と Safari は現在 PNG のみをサポートしていますが、FireFox ははるかに優れたサポートを備えています。
画像を生成してページに書き込む方法は 2 つあります。1 つは、画像オブジェクトを生成してページの DOM ツリーに書き込む方法です。これは、よりサポート的な方法です。
html2canvas
DOM の読み込みプロセスに作用し、情報を収集して、キャンバス イメージを描画します。つまり、表示されている DOM ツリーを実際にキャンバス イメージに切り出すのではなく、DOM ツリーに基づいてキャンバスを再描画します。写真。そのため、多くの CSS スタイルは正確に認識できず、画像に正確に反映できません。他にも次のような多くの制限があります。
●JavaScript は同じドメイン内にある必要があります。クロスドメインの場合は、プロキシ サーバーを使用する必要があります (画像についても同様です)。 ●フレーム内のDOMツリーは正確に描画できません
。
●描画はキャンバスであるため、IE8 などのブラウザでは
FlashCanvas
などのサードパーティ ライブラリを使用する必要があります。
このページでは、スクリーンショットを撮るために使用してさまざまな Web サイトの効果をテストできます。その効果は非常に良好です:
API の使用例:
さらに、このサイトのダウンロード パッケージには JQuery プラグインが含まれていますが、これはこの API をカプセル化しているため無視できます。