Jak po prostu uzyskać tablicę danych pikseli z obrazu?

Question

Dec 20, 2012, 01:08 AM

javascript pixel-manipulation canvas html5

Jak po prostu uzyskać tablicę danych pikseli z obrazu?

Dziękuję wszystkim za odpowiedź. Powinienem być bardziej szczegółowy w moim pytaniu. Przyjrzałem się kilku przykładom, ale oto przykład z W3 Schools (dziękuję @Pointy za wskazanie, że nie jest to źródło, na którym należy polegać - gra słów nie była przeznaczona).

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>

Przede wszystkim jestem trochę zdezorientowany, ponieważ przykład na stronie W3 Schools pokazuje piksele kolorów odwracanego obrazu, ale kiedy kopiuję kod do Sublime Text 2, zapisz go i otwórz w Chrome, pikselowe kolory obraz nie staje się odwrócony, a obraz po prostu wydaje się dokładnie taki sam obok niego.

Moje główne pytanie brzmi: jak mogę dodać wiersz do tego kodu, aby pokazać całą gamę danych pikseli dla obrazu?

Dodałem pusty div z identyfikatorem „danych” poniżej obrazu i dodałem następujący kod, ale cała tablica danych pikseli nie pojawiła się:

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

Próbowałem też zobaczyć przynajmniej długość tablicy danych pikseli, dodając następującą, ale to nie zadziałało:

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

Przyjrzałem się kilku przykładom manipulowania danymi pikseli obrazu z różnych źródeł i kilkakrotnie próbowałem uzyskać całą tablicę danych pikseli, ale nie byłem w stanie.

Chciałbym zobaczyć tablicę danych pikseli, aby rozpoznać znaki lub obrazy w obrazie i zacząć widzieć wzory, które mogą wynikać z określonych rzeczy na obrazie.

Wielkie dzięki za Twoją pomoc.