投稿

投稿がありません。

たけし

チェックボックス

NAME：
ID：
PLATFORM： PC PS4 Xbox Switch
GENDER： ♂ ♀ ?
VOICECHAT： Skype LINE PS Discord No
TIME TO PLAY GAME：
FAVORITE WEAPON：
HIGHEST DMG：
K / D：
RANK：
FREE：

スクショ

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

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

導入方法と処理概要

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

↓↓ここから画像↓↓　（上の対象のDIVを画像化）

↑↑ここまで画像↑↑

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

注意

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

透過

画像の透過

画像の透過


クリックすると画像の透過度が変わります。
戻る

合成

CANVAS合成

CANVAS合成

  • 「＝」ボタンをクリックすると2つのcanvasを合成します
  • 「」ボタンをクリックすると合成結果をクリアします