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()

// returns "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);

//

この方法で呼び出すと、mimeType "image/octet-" のデータ ストリームが生成されます。ブラウザに「stream」を送信しましたが、「保存」ダイアログボックスで画像の適切なサフィックス名が認識されません。 FireFox でのデフォルトの保存ファイルは「xxx.part」です。これは残念ですが、良い方法はないようです。それを解決してください。

html2canvas

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

など、他にも多くの制限があります。

JavaScript は同じドメイン内に存在する必要があります。クロスドメインの場合は、プロキシ サーバーを使用する必要があります (API には指定できるパラメーターがあります)。

フレーム内の DOM ツリーは正確に描画できません。

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

HTML2CANVAS (

[Dom1, DOM2],

{

ロギング: FALSE, s Usecors: False、

Proxy: False、

OnRendered: Function (Canvas) {

// Canvas は、このカテゴリのオブジェクトとして描画されるドローアです

}}}}); API の定義を含め、ドキュメントが非常に貧弱です。ソース コードを読む必要がありますが、コードは明確に記述されています。

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