キャンバスはcrossOriginのために汚染されたが、画像は自分のコンピュータ上にある

Question

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

これは私がすべての情報をつかんいないよしかし、それは奇妙だクロムに取得していますコンソール例外で、ファイルまたはイメージは、サーバーは、すべて私が」交差私のコンピュータ上のファイルを使用しています。私はこのエラーの意味を誤解しているかもしれません。ここで

はイメージが私の.htmlファイルと同じディレクトリにある「画像」というフォルダからロードされるとにかく

function draw(image,x,y,color = 0) { 

context.drawImage(image,x,y); 

if(color != 0) { 
    var dat = context.getImageData(x,y,image.width,image.height); 
    var map = dat.data; 
    var len = map.length; 
    if(color == "red") { 
     for(i = 0;i < len;i += 4) { 
      map[i + 0] += 50; 
      map[i + 1] -= 50; 
      map[i + 2] -= 50; 

     } 
    } 
    context.putImageDate(dat,x,y); 
    } 
} 

コードです。どのようにこれを修正するための任意の提案？ありがとうございました！

Answer 1

file://を使用している場合は、ローカルhttpサーバを実行する必要があります。

最も簡単な方法は、python -m http.server（Python 3）をアプリケーションフォルダで実行しています。 次にアクセスできますhttp://localhost:8000