ボタンクリックしたら、HTMLの指定タグ(id)範囲のみ、「JavaScript」か「PHP」で画面キャプチャしたいです。
HTMLの指定タグ(id)範囲から、画面位置を割り出し、そのサイズを取得して、画像で画面キャプチャすることは可能でしょうか?
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するOS ネイティブな方法でスクリーンショットを取ることはできないと思いますが、指定の HTML 要素を Canvas に描画して、それを画像データに変換することで、ページの一部を画像として取ることは可能です。 Javascript ライブラリの html2canvas がその用途に適しています。コードは以下のようになるはずです。
サンプル: 指定セレクタ('#target_id'等)の要素を画像にして post_screenshot.php
にポスト
function screenshot( selector) {
var element = $(selector)[0];
html2canvas(element).then(function(canvas) {
var imgData = canvas.toDataURL();
$.post("post_screenshot.php", {dataurl: imgData}, function (res_code) {
window.alert( res_code);
});
});
}
(※上のコードは、 GitHub 版でなければ動きません。)
サーバ側では、受け取った JSON データの dataurl
値を Base64 でデコードする形になります。
追記: (2/3)
こちらの回答に、動くコードを投稿しました。