JavaScriptの考え方によるピクセルデータの読み込み

画像からピクセルのRGBAデータを読み込むのに問題があります。しかし、すべてのRGBAデータ（すべてのピクセルで4バイトすべて）のゼロ値に直面しています。私はこのコードをJavaScript用に使用しています：JavaScriptの考え方によるピクセルデータの読み込み

ところで、私はこのコードをhtmlに使います。と私はChromeやFirefoxでhtmlを実行しますが、コンソールログを見るとピクセルデータのすべての値はゼロです。なぜですか？

var canvas= document.getElementById('mycanvas'); 
 
var c=canvas.getContext("2d"); 
 

 
// c.beginPath(); 
 
// c.moveTo(0,0); 
 
// c.lineTo(500,200); 
 
// c.stroke(); 
 

 
var img = new Image(); 
 
img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; 
 
img.crossOrigin = "Anonymous"; 
 

 
// var img= document.getElementById('image') 
 
img.onload=function() { 
 
\t \t c.drawImage(img,0,0); 
 
} 
 

 
var myImageData = c.getImageData(0, 0, 500, 500); 
 
//var myImageData = c.createImageData(600, 600); 
 
var numBytes = myImageData.data.length; 
 
var pixelData=myImageData.data; 
 
console.log (numBytes); 
 
console.log (pixelData); 
 

 
// var x= function() { 
 
\t 
 
// for(var i=0;i<pixelData.length;i+=40) 
 

 
// { 
 

 
// pixelData[i]  = 255 - pixelData[i];  // red 
 
//  pixelData[i + 1] = 255 - pixelData[i + 1]; // green 
 
//  pixelData[i + 2] = 255 - pixelData[i + 2]; // blue 
 
//  } 
 
//  c.putImageData(myImageData, 0, 0); 
 
// }; 
 
// //if (pixelData[i]&&pixelData[i+1]&&pixelData[i+2]===255) { 
 

 
// //console.log (numBytes); 
 

 
// //} 
 

 
// //else {} 
 

 

 
// //}; 
 

 
// // 
 
// x(); 
 

 

 

 
//pixel = imageData.data[((row * (imageData.width * 4)) + (colume * 4)) + colorindex]; 
 

 
//var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // here is the most important part because if you dont replace you will get a DOM 18 exception. 
 
//window.location.href=image;

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Image processing</title> 
 
\t <style type="text/css"> 
 
\t 
 
</style> 
 
</head> 
 

 

 
<body> 
 

 
<canvas id="mycanvas" width="300" height="227"> 
 
\t 
 
</canvas> 
 
<img src="https://mdn.mozillademos.org/files/5397/rhino.jpg" id="image" style="display:none;"> 
 
\t 
 
</style> 
 
\t 
 
</style>=""> 
 

 
<script src="img.js"> 
 

 
</script> 
 
\t 
 

 

 
</body> 
 
</html>

出典

2017-06-01 Taher

[CanvasContext2DのdrawImage（）の問題の可能性の重複\ [onloadとCORS \]]（https://stackoverflow.com/questions/32880641/canvascontext2d-drawimage-issue-onload-and-cors） – Kaiido

イメージがロードされ、cで描画されるまで待つ必要がありますanvasを取得してからimageDataを取得します。ここでは、 'onload'ハンドラからgetImageDataを呼び出しています。つまり、' img.src = "..."の直後に呼び出されます。 img.crossOrigin = "..."; '非同期+ javascript"を検索します。 – Kaiido

画像が別のドメインから来ているので、これは動作しません。キャンバスは同じ原点からの画像のみを受け入れます。 CORSをサポートしていない外部ソースからgetImageData（）を使用することはできません。

ただし、画像をdataURLに変換してキャンバスにペイントすることができます。

編集：申し訳ありませんが、正しく表現していません。唯一の方法は、サーバー/ドメインにローカルでイメージをダウンロードし、それをキャンバスに描画することです。

出典

2017-06-01 10:23:36 Mohanesh

"*ただし、イメージをdataURLに変換してからキャンバスをペイントすることができます。*「イメージが元の交差点の制限を満たさない場合は、どのようにイメージをdataURLに変換しますか？また、キャンバスが汚れている場合は、セキュリティエラーだけの値はありません。 – Kaiido

こんにちはMohanesh あなたの答えをありがとう。次のステップを改訂しましたが、まだピクセル値はゼロです。 1-画像ソースを自分のパソコンで正確に実行されるフォルダに変更しました。 2-htmlを実行するためにlocalhostサーバに使用しました。 3私のコードでimg.crossOrigin = "Anonymous"を使用します。どうしたのですか？ – Taher

@Kaiido：私は編集しました。それを正しく表現してくれないのは残念です。 Taher：crossOrginヘッダーの設定は、要求されたドメインがクロスオリジン要求を受け入れない場合は使用できません。 **任意のドメインからの要求を受け入れるには、** Access-Control-Allow-Origin **を「*」に設定する必要があります。 – Mohanesh

私は私のプロブラムを解決しました。

私はローカルホストまたはhttpドメインを使用する必要があります。私はPythonをインストールし、このコマンドを使用してlocalhost erverを作成しました。

Pythonの-m http.server

第二に、私が代わりにコードは私の作品drawimage.this creatpatternコマンドを使用：

var canvas = document.getElementById('mycanvas') 
 
var c = canvas.getContext('2d'); 
 
// canvas.height = window.innerHeight; 
 
// canvas.width = window.innerWidth; 
 
var img = document.getElementById("image") 
 
img.crossOrigin = "Anonymous"; 
 

 
var ptrn = c.createPattern(img, 'no-repeat'); 
 
c.fillStyle = ptrn; 
 
c.fillRect(0, 0, canvas.width, canvas.height); 
 

 
var myImageData = c.getImageData(0, 0, canvas.width, canvas.height); 
 
var numBytes = myImageData.data.length; 
 
var pixelData = myImageData.data; 
 
console.log(numBytes); 
 
console.log(pixelData);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Image processing</title> 
 
    <style type="text/css"> 
 

 
    </style> 
 
</head> 
 

 
<body> 
 
    
 
    <canvas id="mycanvas" width="100" height="100"> 
 
    </canvas> 
 
    <img src="test1.png" alt="" id="image" style="display: none;" /> 
 
    <script src="img22.js"> 
 
    </script> 
 
</body> 
 

 
</html>

出典

2017-06-11 10:47:53 Taher

JavaScriptの考え方によるピクセルデータの読み込み

答えて

関連する問題