JavaScriptスクリーンショットを使用して、ここで2つのオープンソースコンポーネントをお勧めします。1つはCanvas2Imageです。これは、PNG/JPEG/BMP画像を描画してプログラミングできるCanvasのプログラムです。しかし、それを一人で持っているだけでは十分ではありません。 DOMオブジェクトをキャンバスオブジェクトに変換できるHTML2Canvasを必要とする任意のDOM（少なくとも大多数）のスクリーンショットを撮影する必要があります。 2つの関数を組み合わせることで、ページ上のDOMスクリーンショットをPNGまたはJPEG画像に持ち込むことができます。これは非常にクールです。
canvas2image
その原則は、HTML5 Canvasオブジェクトを使用してTodataurl（）APIを提供することです。
コードコピーは次のとおりです。
var strdatauri = ocanvas.todataurl（）;
//「データ：Image/PNG; Base64、Ivborw0kggoaaaanansuheugaaamgaaadicayaact ...」を返します。
結果はbase64エンコードされています（実際、画像は文字列の形でこの方法でページに書き込むこともできます）ため、base64エンコードLIBも必要です。
ただし、現在多くの欠陥があります。たとえば、OperaとSafariはPNGのみをサポートしますが、Firefoxの方がはるかに優れています。
ページに写真を書く方法は2つあります。 1つは、ページDOMツリーに書き込む画像オブジェクトを生成することです。これは、より良い協力的な方法でもあります。
コードコピーは次のとおりです。
//変換されたPNG画像を含む<img>要素を返します
var oimgpng = canvas2image.saveaspng（ocanvas、true）;
ただし、JavaScriptスクリーンショット関数を実行する場合は、スクリーンショットの後にファイルを保存するために「保存」ダイアログボックスを自動的に開きます。
コードコピーは次のとおりです。
canvas2image.saveaspng（ocanvas）;
//ユーザーにPNGとして画像を保存するように促します。
このメソッドを呼び出すと、Mimetype「Image/Octet-Stream」を含むデータストリームがブラウザに生成されますが、「保存」ダイアログでは、適切なサフィックス名を画像の名前を認識できません。デフォルトの保存されたファイルは、Firefoxの下で「xxx.part」と呼ばれます。これは残念ですが、良い解決策はないようです。
html2canvas
DOMロードプロセスに基づいて機能し、その中の情報を収集し、キャンバス画像を描画します。言い換えれば、実際に表示されたDOMツリーをキャンバスの画像にカットするのではなく、DOMツリーに基づいてキャンバス画像を再描画します。したがって、多くのCSSスタイルを正確に識別することはできず、図に正確に反映することはできません。
次のような他の多くの制限があります。
●JavaScriptは同じドメインでなければなりません。クロスドメインの状況の場合、プロキシサーバーを使用する必要があります（APIには指定できるパラメーターがあります）。同じことが画像に当てはまります。
●フレーム内のDOMツリーを正確に描画することはできません。
●キャンバス図を描画するため、IE8のようなブラウザはFlashCanvasなどのサードパーティライブラリを使用する必要があります。
このページは、それを各Webサイトのスクリーンショットに使用する効果をテストでき、その効果は非常に良いです。
API使用の例：
コードコピーは次のとおりです。
html2canvas（
[dom1、dom2]、
{
ロギング：FALSE、
ユーザー：FALSE、
プロキシ：FALSE、
onRendered：function（canvas）{
//キャンバスは描画されたキャンバスオブジェクトです
}
}
）;
このタイプの比較的ニッチクラスライブラリの場合、ドキュメントは非常に貧弱です。これには、ソースコードを読む必要があり、コードに明確に記述されているAPIの定義が含まれます。
さらに、このサイトのダウンロードパッケージには、このAPIをカプセル化して無視できるjQueryプラグインもあります。