5811


ボタンクリックしたら、HTMLの指定タグ(id)範囲のみ、「JavaScript」か「PHP」で画面キャプチャしたいです。

HTMLの指定タグ(id)範囲から、画面位置を割り出し、そのサイズを取得して、画像で画面キャプチャすることは可能でしょうか？


CC BY-SA 3.0
2015-02-02T22:13:06.193
5807
2015-02-03T10:28:19.997
7886
question
javascript php
ボタンクリックしたら、HTMLの指定タグ(id)範囲のみ画面キャプチャしたい


OS ネイティブな方法でスクリーンショットを取ることはできないと思いますが、指定の HTML 要素を Canvas
に描画して、それを画像データに変換することで、ページの一部を画像として取ることは可能です。 Javascript ライブラリの
[html2canvas](https://github.com/niklasvh/html2canvas)
がその用途に適しています。コードは以下のようになるはずです。

サンプル: 指定セレクタ('#target_id'等)の要素を画像にして `post_screenshot.php` にポスト

[code]

    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);
            });   
        });
    }
    
[/code]

(※上のコードは、 GitHub 版でなければ動きません。)

サーバ側では、受け取った JSON データの `dataurl` 値を Base64 でデコードする形になります。

* * *

**追記: (2/3)**

[こちらの回答](https://ja.stackoverflow.com/a/5862/4978)に、動くコードを投稿しました。


CC BY-SA 3.0
2015-02-02T23:23:44.590
5811
2015-02-03T10:28:19.997
2017-04-13T12:52:39.113
-1
4978
5807
answer