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