【JavaScript】 CanvasでgetImageData()したらSecurityErrorがでた
更新日：2020/06/05
JavaScriptでCanvasに描画していたら、SecurityErrorが出ました。
原因を調べてみました。
エラー内容
今回エラーが出たのは、次のようなコードです。
ローカルパソコンで、実行しています。
window.addEventListener( "DOMContentLoaded" , ()=> {
const img = new Image();
img.onload = ()=>{
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.drawImage( img , 50 , 50 );
const imgData = context.getImageData( 50 , 50 , img.naturalWidth , img.naturalHeight); // ここでエラー
context.putImageData( imgData , 100 + img.naturalWidth , 50 );
};
img.src = "https://xxx.com/xxx.jpg";
});
サーバーから画像を持ってきて、drawImage()で描画後、getImageData()でImageオブジェクトを作成しようとしたらエラーが出ました。
実行していたブラウザはFirefoxで、エラー内容は次のようなものでした。
SecurityError: The operation is insecure.
Chromeでもエラー
意味が分からなかったので、同じコードをChromeでも実行してみました。
同じ場所でエラーになりましたが、エラー内容が違っていました。
Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
cross-originの文字が...
cross-originは、異なるドメイン間でデータのやり取りをするときに、いろいろ問題になるやつですね。
ローカルパソコン上のhtmlから、サーバーのデータにアクセスするときもたまにエラーになります。
つまり、そういうことですね。
サーバーにアップロードして実行したら、エラーがでませんでした。
まさかそこまで見ているとは…
まさかサーバーから取得したデータそのものでなく、キャンバスに描画した画像を切り取ろうとしたらエラーがでるとは思いませんでした。
そこまで見ているとは…
驚きです。
更新日：2020/06/05
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。
