test

JavaScrpitで撮るスクリーンショット

導入方法と処理概要

No概要補足
html2canvas.jsを読み込む
任意のタイミングでhtml2canvas関数を呼ぶ※今回はオンロード処理
onrendered 処理にて指定のElementに画像を追記※[img]タグの[src]や、[a]タグの[href]など


↓↓ここから画像↓↓ (上の対象のDIVを画像化)

↑↑ここまで画像↑↑


スクリーンショット(document.body全体)をダウンロード


注意

  • 実際にはスクリーンショットを撮っているわけではない
  • html2canvasは、HTML内のDOMやCSSを解釈してCanvas上に描画するライブラリ
  • つまり、レンダリングエンジンに近い動作をする
  • そのため、ブラウザと異なる表示がされる場合がある
  • flashやapplet,iframe(別URL)はうまくキャプチャできない