html2canvasでキャプチャした画像が空になる

投稿者: Anonymous

html2Canvasの DOMを画像に書き出す方法 を参考にさせていただき、コードを書いたのですが、

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

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

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

ご教授願います。

解決

HTMLページと同じオリジン(由来、大抵ドメインで決まります)の画像を使用していますか?
Canvas要素に別オリジンの要素を描画した場合、そのCanvas要素の内容は取り出せなくなります。
セキュリティ上の制約です。
この制約がないと、本人しか閲覧できないはずの写真をJavaScriptで盗む、といった事が可能になるからです。

自分が所有しているサーバ同士であれば、同じオリジンとして扱う方法もあるようです。https://developer.mozilla.org/ja/docs/Web/HTML/CORS_enabled_image

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *