13

回答ありがとうございます。質問をもっと具体的にするべきでした。私はいくつかの例を見ましたが、これは W3 Schools のものです (これは信頼すべきソースではないことを指摘してくれた @Pointy に感謝します - しゃれは意図されていません)。

http://www.w3schools.com/tags/canvas_getimagedata.asp

<!DOCTYPE html>
<html>
<body>

  <img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">

  <canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
  </canvas>

  <script>
    document.getElementById("scream").onload = function () {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, c.width, c.height);
    // invert colors
    for (var i = 0; i < imgData.data.length; i += 4) {
        imgData.data[i] = 255 - imgData.data[i];
        imgData.data[i + 1] = 255 - imgData.data[i + 1];
        imgData.data[i + 2] = 255 - imgData.data[i + 2];
        imgData.data[i + 3] = 255;
    }
    ctx.putImageData(imgData, 0, 0);
};
  </script>

</body>
</html>

まず第一に、W3 Schools Web サイトの例では画像のピクセルの色が反転しているため、少し混乱していますが、コードを Sublime Text 2 にコピーして保存し、Chrome で開くと、ピクセルの色は次のようになります。画像が反転することはなく、画像はその隣にまったく同じように表示されます。

私の主な質問は、このコードに行を追加して、画像のピクセルデータの配列全体を表示するにはどうすればよいですか?

画像の下に「data」の id を持つ空の div を追加し、次のコードを追加しましたが、ピクセル データの配列全体が表示されませんでした。

document.getElementById("data").innerHTML=imgData.data;

また、以下を追加して、少なくともピクセルデータ配列の長さを確認しようとしましたが、うまくいきませんでした:

document.getElementById("data").innerHTML=imgData.data.length;

さまざまなソースから画像ピクセル データを操作する例をいくつか見て、ピクセル データの配列全体を取得しようと何度も試みましたが、できませんでした。

ピクセル データの配列を表示して、画像内の文字や画像を認識し、画像内の特定のものから現れる可能性のあるパターンを確認したいと考えています。

どうもありがとうございました。

4

1 に答える 1

7

これはまさにあなたが必要とするものです：

http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/

以下は、ピクセル RGBA の詳細にアクセスする方法です。

imageData = context.getImageData(imageX, imageY, imageWidth, imageHeight); // get the image array

//below is how to access to your pixel details 
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

編集： 編集した質問への答えは次のとおりです。

document.getElementById("data").innerHTML=imgData.data.toString();

または、ループを使用して配列を反復処理し、以下のように毎回要素を出力できます。

for(i=0 ; i< imgData.data.length ; i++){
    document.getElementById("data").innerHTML += imgData.data[i];
}

これが役立つことを願っています。

于 2012-12-20T00:20:51.533 に答える