ホーム > カテゴリ > HTML5・JavaScript >

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. のエラー回避方法

ChromeでHTML5のcanvasで遊んでいると「Uncaught SecurityError」というエラーが発生する場合があります。そのエラーの回避方法をご紹介します。

エラー内容

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

エラーを発生させる

このエラーを発生させる為に、次のようなコードを記述します。

<!DOCTYPE html>
<html>
<body>
  <canvas id="MyCanvas"></canvas>
  <img id="img_test" src="test.gif" style="display:none;">

  <script>
    // キャンバスの取得
    var canvas = document.getElementById("MyCanvas");
    
    if (canvas.getContext) {
      // コンテキストの取得
      var ctx = canvas.getContext("2d");     
      // イメージの取得           
      var image = document.getElementById("img_test");

      // イメージが読み込まれた
      image.addEventListener("load", function () {    
    
        canvas.width  = image.width;
        canvas.height = image.height;
          
        // キャンバスに画像を描画
        ctx.drawImage(image,0,0);
        
        // キャンバスのイメージデータを取得  
        var imagedata = ctx.getImageData(0, 0, image.width, image.height);
        
      },false);
    }
  </script>

</body>
</html>

test.gifは適宜、用意してくださいね。

このコードを実行すると27行目でエラーが発生します。

エラーの意味

このエラーはローカルでcontext.getImageData()を実行した為に発生するものです。Chrome以外のFireFox、IE、Edgeでは発生しませんのでChrome特有のエラーとなります。

その他のセキュリティエラーとしてはWorkerオブジェクトなどが挙げられます。

エラーの回避方法

HTMLまたはJavascriptのファイルをWebサーバーにアップロードして実行するとエラーは発生しません。

ローカル環境でこのエラーを回避するにはChromeを起動するショートカットファイルの設定を変更します。

ショートカットファイルを右クリックして「プロパティ」を開きます。

次に「ショートカット」タブの中にある「リンク先」の後方に

--allow-file-access-from-files

を追加してOKボタンを押します。

空白は「半角1つ」です。

そして、chromeを閉じてから設定したショートカットから再起動します。

これでローカルでもセキュリティエラーは発生しなくなります。

以上となります。






関連記事


前の記事：Base64変換(エンコード/デコード)で日本語文字列に対応する[ユニコード/Unicode]
次の記事：画像で使用している色の数を取得する[色数の取得]

公開日：2016年02月16日
記事NO：01767