エラーの改善方法

Question

このエラーの改善策がわかりません。どなたか教えてください
//Javascript
function start() {

var canvas = document.getElementById('c1'); 
var context = canvas.getContext('2d');
var image =new Image();
image.onload = function () {

    //画像の描画
    context.drawImage(image, 0, 0);
    var imageData = context.getImageData(0, 0, image.width, image.height);
    alart(imageData[5])

};

//画像を読み込む
image.src = "/coyo/first.jpg";

}

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

調べた結果ローカルサーバーを起動させて、そこでファイルを表示させると良いとわかったのですが、意味がわからないのです。

Comments

[think49]

markdownで書いて頂けると有難く。
https://teratail.com/help

[sonor_3rd]

エラーメッセージ文で検索されましたか？
質問前に、どのような改善策を試してみたのかも記述してください。

Answer 1

file:///
のURLだとセキュリティエラーになります。
Webサーバをレンタルしたりして実行して下さい。
参考URL：
http://d.hatena.ne.jp/nakamura001/20101206/1291658820

Comments

[UmemuraTadashi]

ありがとうございます。WEBサーバーにアップしたらOKでした。

Answer 2

環境はwindowsでしょうか？

• Apacheをインストールする
• PHPのビルトインサーバーを利用する

どちらも、どこかにインストール＆設定の方法が載っていると思うので、探してみてください。
PHPは比較的簡単です。