Wie tun Sie einfach, um ein array von Pixeldaten aus einem Bild?

Danke Euch allen für die Beantwortung. Ich hätte mehr spezifisch mit meiner Frage. Ich schaute auf eine Reihe von Beispielen, aber hier ist die von W3 Schools (danke @Pointy für den Hinweis, dass dies nicht eine Quelle sollte man sich verlassen - kein Wortspiel beabsichtigt).

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>

Zunächst einmal bin ich ein bisschen verwirrt, da das Beispiel auf die W3 Schools website zeigt die pixel die Farben des Bildes werden invertiert, aber wenn ich kopieren Sie den code in Sublime Text 2, speichern Sie es, und öffnen Sie es in Google Chrome, den pixel Farben des Bildes werden nicht invertiert und das Bild erscheint einfach wieder genau daneben.

Meine wichtigste Frage ist, wie kann ich eine Zeile hinzufügen, um diesen code zu zeigen, das gesamte array von Pixeldaten für das Bild?

Ich Hinzugefügt ein leeres div mit der id "Daten" unter dem Bild und folgenden code Hinzugefügt, sondern das gesamte array von pixel-Daten werden nicht angezeigt:

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

Ich habe auch versucht zu sehen, zumindest die Länge des pixel-Daten-array durch das hinzufügen der Folgen, aber es hat nicht funktioniert:

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

Ich habe mir ein paar Beispiele für die Manipulation von pixel-Daten aus verschiedenen Quellen und versucht, eine Anzahl von Zeiten zu bekommen, das gesamte array von Pixeldaten, aber war nicht in der Lage.

Ich würde gerne sehen das array von pixel-Daten zu erkennen, Zeichen oder Bilder in der Bild und damit zu beginnen, die Muster zu sehen, die sich aus bestimmten Dinge in das Bild.

Vielen Dank für deine Hilfe.

InformationsquelleAutor Jackmc1047 | 2012-12-20
  1. 5

    Dieser sollte genau das sein, was Sie brauchen :

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

    Unten ist, wie der Zugriff auf ein RGBA-pixel-details:

    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];

    Edit:
    Die Antwort auf Ihre Frage bearbeitet wird :

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

    oder verwenden Sie eine Schleife für die Iteration über das array und drucken ein element jedes mal wie folgt:

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

    Ich hoffe, das hilft.

    • haben, die Ihr problem lösen ?
    • Karamosly vielen Dank für die Beantwortung. Ich hätte mehr spezifisch mit meiner Frage. Ich klärte ihn über. Ich habe versucht, zu ändern Beispiele wie die, die Sie zur Verfügung gestellt zu bekommen, die gesamten pixel-array, aber war nicht in der Lage. Mein Problem ist viel mehr klar und deutlich erklärt, oben. Nochmals vielen Dank für die Hilfe.
    • überprüfen Sie meine wieder Bearbeiten, wenn diese Ihr problem lösen bitte markiere es als gelöst.
    InformationsquelleAutor Mehdi Karamosly
Schreibe einen Kommentar