HTML5キャンバスでの画像操作が機能していません

-1

私はHTML5キャンバスでコースをやっています。私は教えられたコードのいくつかを使用しました。それらはチュートリアルで動作しますが、試してみると画像はまったく変化しません。ここは色を反転させるための私のコードです： - HTML5キャンバスでの画像操作が機能していません

<!doctype html> 
 
<html> 
 
<body> 
 
    <canvas width="1000" height="1000"></canvas> 
 
    <script> 
 
    var c = document.querySelector("canvas"); 
 
    var ctx = c.getContext('2d'); 
 

 
function doIt() { 
 
    var imageData = ctx.getImageData(0,0, 1000, 1000); 
 
    var length = imageData.data.length/4; 
 
    for (var i = 0; i < length; i++){ 
 
     imageData.data[i * 4 + 0] = 255 - imageData.data[i * 4 + 0]; //Red 
 
     imageData.data[i * 4 + 1] = 255 - imageData.data[i * 4 + 1]; //Green 
 
     imageData.data[i * 4 + 2] = 255 - imageData.data[i * 4 + 2]; //Blue 
 
    } 
 
    // Comment this line to see original image 
 
    ctx.putImageData(imageData, 0, 0); 
 
} 
 

 
var image = new Image(); 
 
image.onload = function() { 
 
    ctx.drawImage(image, 0, 0); 
 
    doIt(); 
 
} 
 
image.src = 'rgb.png'; 
 
    </script> 
 

 
</body> 
 
</html>

私が間違っ

出典

2017-12-24 Gameatro

ローカルで実行すると、自分のコードが動作します。コードを実行すると、あなたのイメージファイル 'rgb.png'がローカルにロードされていますか？あなたの例のように現れますか？それともリモートサーバから来ていますか？ – almcd

@almcd画像はhtmlと同じフォルダに保存されます。サーバーにはありません。 – Gameatro

html as file（file：//）をロードすると、クロス・オリジンとみなされます。あなたのページが 'http：// localhost'経由でホストされるように単純なサーバからロードしてください – K3N

私はあなたが抱えている問題があるという事実に関連していることをかなり確信していつもりどこPlsは私を助けて読み込まれている画像はtainting the canvasです。

任意の起源からの要求
を設定できるように設定Access-Control-Allow-Originヘッダを持つサーバーからイメージをサーブimage.crossOrigin：

以下の例は、それがあるという事実を除いて、コードと同じです〜anonymous

対照的に、変更されていない画像はhttp://so-answers.s3-website-us-east-1.amazonaws.com/rgb.pngです。

var c = document.querySelector("canvas"); 
 
var ctx = c.getContext('2d'); 
 

 
function doIt() { 
 
    var imageData = ctx.getImageData(0,0, 1000, 1000); 
 
    var length = imageData.data.length/4; 
 
    for (var i = 0; i < length; i++){ 
 
     imageData.data[i * 4 + 0] = 255 - imageData.data[i * 4 + 0]; //Red 
 
     imageData.data[i * 4 + 1] = 255 - imageData.data[i * 4 + 1]; //Green 
 
     imageData.data[i * 4 + 2] = 255 - imageData.data[i * 4 + 2]; //Blue 
 
    } 
 
    // Comment this line to see original image 
 
    ctx.putImageData(imageData, 0, 0); 
 
} 
 

 
var image = new Image(); 
 
image.onload = function() { 
 
    ctx.drawImage(image, 0, 0); 
 
    doIt(); 
 
} 
 
image.crossOrigin = "anonymous"; 
 
image.src = 'http://so-answers.s3-website-us-east-1.amazonaws.com/rgb.png';

<canvas width="1000" height="1000"></canvas>

編集：あなたはすべて同じサーバーからHTML、JavaScriptファイルと画像を提供した場合

は（あまりにも同じディレクトリかもしれないが、それは必要条件ではありません）、開発中、またはプロダクションでは、クロス起源の問題は発生しません。

ローカル開発では、組み込みのWebサーバーを使用して、コマンドラインからファイルを含むディレクトリにpython -m SimpleHTTPServer 8000を実行して、Pythonでこれを実行できます。詳細はhttp://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/を参照してください。

HTMLファイルとJavaScriptファイル（開発中または運用中）とは異なるドメインの画像を提供する場合は、クロスオリジンの問題が発生します。これは、私が上記の例で行った変更によって対処することができます。

また、ローカル開発サーバーを実行せずに、ブラウザに直接ファイルを読み込むだけで、あなたの質問にコメントしてもらえます。

出典

2017-12-24 14:08:56 almcd

私はイメージをホストするためにpythonサーバを使用できますか？同じディレクトリにサーバーを追加することによって？ – Gameatro

@Gameatro私はあなたの質問に答えて上記の私の答えを編集しました。希望が役立ちます。 – almcd

よくある質問。私はサーバーを作成した後、私はhtmlファイルまたはサーバーのアドレスを開く必要がありますか？それは違うだろうか？ – Gameatro

HTML5キャンバスでの画像操作が機能していません

答えて

関連する問題