18081
html2Canvasの
[DOMを画像に書き出す方法](https://ja.stackoverflow.com/questions/5851/dom%E3%82%92%E7%94%BB%E5%83%8F%E3%81%AB%E6%9B%B8%E3%81%8D%E5%87%BA%E3%81%99%E6%96%B9%E6%B3%95/5862#5862)
を参考にさせていただき、コードを書いたのですが、

スクリーンショットを撮るボタンを押しても、空の画像ファイルが生成されるだけです。  
クリアボタンも効きません...。  
私が、ターゲットとなるdivの中で、img srcにphp変数を使用しているからなのでしょうか？  
しかしローカルファイルに置換してもダメでした。

```

        <div id="target_screen">
        <?php
            echo "<img class=\"effectedImage\" src=\"$image\">";
        ?>
    </div>
    
```

テストとして、この画面下部にスクリーンショットを表示しようとしていますが、  
最終的には、取得した画像を別のphpへpostしたいと考えています。

ご教授願います。
CC BY-SA 3.0
2015-10-26T04:46:13.157
18079
2015-11-25T06:20:06.583
2017-04-13T12:52:38.920
-1
12973
question
javascript php html5 html5-canvas
html2canvasでキャプチャした画像が空になる
HTMLページと同じオリジン（由来、大抵ドメインで決まります）の画像を使用していますか？  
Canvas要素に別オリジンの要素を描画した場合、そのCanvas要素の内容は取り出せなくなります。  
セキュリティ上の制約です。  
この制約がないと、本人しか閲覧できないはずの写真をJavaScriptで盗む、といった事が可能になるからです。

自分が所有しているサーバ同士であれば、同じオリジンとして扱う方法もあるようです。<https://developer.mozilla.org/ja/docs/Web/HTML/CORS_enabled_image>
CC BY-SA 3.0
2015-10-26T05:33:18.757
18081
2015-10-26T05:33:18.757
3054
18079
answer