JavaScriptで撮るスクリーンショット
導入方法と処理概要
| No | 概要 | 補足 |
|---|---|---|
| １ | html2canvas.jsを読み込む | |
| ２ | 任意のタイミングでhtml2canvas関数を呼ぶ | ※今回はオンロード処理 |
| ３ | onrendered 処理にて指定のElementに画像を追記 | ※[img]タグの[src]や、[a]タグの[href]など |
↓↓ここから画像↓↓ （上の対象のDIVを画像化）
![]()
↑↑ここまで画像↑↑
↑↑ここまで画像↑↑
スクリーンショット(document.body全体)をダウンロード
注意
- 実際にはスクリーンショットを撮っているわけではない
- html2canvasは、HTML内のDOMやCSSを解釈してCanvas上に描画するライブラリ
- つまり、レンダリングエンジンに近い動作をする
- そのため、ブラウザと異なる表示がされる場合がある
- flashやapplet,iframe（別URL）はうまくキャプチャできない