JavaScript は Web ページのスクリーンショットを実装します。 function_javascript スキル

JavaScript を使用してスクリーンショットを撮る場合、ここでは 2 つのオープン ソース コンポーネントをお勧めします。1 つは Canvas2Image で、Canvas の描画を PNG/JPEG/BMP 画像にプログラムできますが、それだけでは十分ではありません。 DOM (少なくとも大部分) のスクリーンショットを撮るには、DOM オブジェクトを Canvas オブジェクトに変換できる html2canvas が必要です。 2 つの機能を組み合わせると、ページ上の DOM を PNG または JPEG 画像にスクリーンショットすることができます。これは非常に優れています。

Canvas2Image

原則は、HTML5 キャンバス オブジェクトを使用して toDataURL() API を提供することです。

コードをコピー コードは次のとおりです:

var strDataURI = oCanvas.toDataURL(); // 「data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt...」を返します

このような結果は、base64 でエンコードされます (実際、この方法で画像を文字列の形式でページに書き込むこともできます)。そのため、base64 エンコードおよびデコード ライブラリも必要です。

しかし、現在多くの欠陥があります。たとえば、Opera と Safari は現在 PNG のみをサポートしていますが、FireFox ははるかに優れたサポートを備えています。

画像を生成してページに書き込む方法は 2 つあります。1 つは、画像オブジェクトを生成してページの DOM ツリーに書き込む方法です。これは、よりサポート的な方法です。

コードをコピー コードは次のとおりです:

// 変換された PNG 画像を含む 要素を返します
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);

ただし、JavaScript スクリーンショット関数を作成する場合は、スクリーンショットを撮った後にファイルを保存するための「保存」ダイアログ ボックスを自動的に開くことができます。

コードをコピーします コードは次のとおりです:

Canvas2Image.saveAsPNG(oCanvas);
// 画像を PNG として保存するようユーザーに要求します。

このメソッドを呼び出すと、mimeType が「image/octet-stream」のデータ ストリームがブラウザに生成されますが、[保存] ダイアログ ボックスは画像の適切なサフィックス名を認識できません。FireFox で保存されるデフォルトのファイルは「xxx.part」です。これは残念ですが、解決策はないようです。

html2canvas

DOM の読み込みプロセスに作用し、情報を収集して、キャンバス イメージを描画します。つまり、表示されている DOM ツリーを実際にキャンバス イメージに切り出すのではなく、DOM ツリーに基づいてキャンバスを再描画します。写真。そのため、多くの CSS スタイルは正確に認識できず、画像に正確に反映できません。

他にも次のような多くの制限があります。

●JavaScript は同じドメイン内にある必要があります。クロスドメインの場合は、プロキシ サーバーを使用する必要があります (画像についても同様です)。 ●フレーム内のDOMツリーは正確に描画できません

。 ●描画はキャンバスであるため、IE8 などのブラウザでは
FlashCanvas
などのサードパーティ ライブラリを使用する必要があります。 このページでは、スクリーンショットを撮るために使用してさまざまな Web サイトの効果をテストできます。その効果は非常に良好です:

API の使用例:

コードをコピーします コードは次のとおりです:

html2canvas(

[dom1、dom2]、
{
ロギング: false、
useCORS: false、
プロキシ: false,
onrendered: function(canvas){
// Canvas は描画されるオブジェクトです
}
}
);

この比較的ニッチなクラス ライブラリについては、API の定義を含め、ドキュメントが非常に貧弱です。ソース コードを読む必要がありますが、コードは明確に記述されています。

さらに、このサイトのダウンロード パッケージには JQuery プラグインが含まれていますが、これはこの API をカプセル化しているため無視できます。