Holen Sie Pixel einer bitmap-Grafik mit javascript

Bin ich zu schreiben versucht ein greasemonkey-javascript-code speziell für meine eigene Seite. Auf der Seite gibt es ein img mit der id "barcode".

Kann ich verwenden

var imageattributes = document.getElementById('barcode');

bekommen und das Bild von der Seite.
Was ich möchte ist, dass ich möchte in der Lage sein, um alle Pixel in diesem Bild in ein array.

Wurde ich auf stackoverflow, und sah einige Möglichkeiten, dies zu tun. Ich sah auch pixastic. Mein problem mit den Lösungen, die in stackoverflow ist, dass

var imgData = context.getImageData(0, 0, canvas.height, canvas.width);

funktioniert nicht. Egal was ich mache.
Und pixastic nicht angezeigt wie kann ich das anzeigen der pixel-Daten, jederzeit und überall. Ihre Dokumentation umfasst nur die Funktionen, die Sie bereits haben, für die Umkehrung, blur, etc.

Den code, den ich derzeit habe, ist dies:

var imageattributes = document.getElementById('barcode').attributes;
var imageurl = imageattributes.getNamedItem("src").value;
var imageurl2 = imageurl.replace("..","http://localhost");

var img = new Image();
img.src = imageurl2;
context.drawImage(img, 0, 0);
var imgData = context.getImageData(0, 0, canvas.height, canvas.width);
var pixel = new Array();
for(i=0;i<canvas.height;i++){
    pixel[i] = new Array();
    for(j=0;j<canvas.width;j++){
        pixel[i][j] = imgData.data[i*canvas.width+j*4];
    }
}
document.getElementById('derp').innerHTML = imageurl;

Soll, um das image, nehmen es die src, laden Sie es als neues Bild, und legen Sie die Pixel innerhalb eines Arrays. Und die Letzte Zeile ist nur um zu zeigen, auf dem Bildschirm, wenn der code funktioniert hat oder nicht, also wenn die url druckt, bedeutet es, dass es funktioniert, wenn nicht, ist es nicht.

Kann jemand mir bitte helfen mit diesem? Danke.

  • In welcher Weise wird getImageData nicht funktionieren? Macht es einen Fehler auslösen, oder zurück null oder etwas anderes?
  • Ich bin nicht in der Lage zu sehen, die Fehler oder was passiert. Ich habe gerade alles gelöscht und schrieb den code Zeile für Zeile zu überprüfen, ob die Letzte Zeile funktioniert und schreibt etwas auf der Webseite. Als ich kam zu dieser bestimmten Zeile, funktioniert es nicht mehr.
  • Können Sie eine console.log und sehen das Ergebnis in der Konsole? Was ist das Ergebnis? Ist imgData.data besiedelt?
  • Ich bin mit den javascript-codes auf firefox zeilenweise auf der web-Konsole. Er Stoppt auf der Linie Zusammenhang.drawImage(img, 0, 0), weil der Kontext nicht definiert ist. Sah ich irgendwo, dass ich sollte var context = document.getElementById('barcode').getContext('2d') den ersten, aber das funktioniert auch nicht. Es sagt der getContext ist nicht eine Funktion. Also ich denke, das ist, wo ich schief gehen?
  • Warten Sie, tun Sie nicht haben eine <canvas> element? Das ist die zentrale Komponente der gesamten Funktion. Schreiben Sie eine Antwort jetzt.
InformationsquelleAutor Umut Kaya İlkiz | 2012-06-01
  1. 1

    Die Sie nicht haben (oder nicht verwenden) ein <canvas> element. Ihre Datei sollte wie folgt Aussehen:

    <img id="barcode" src="whatever.bmp">
<canvas id="mycanvas">
    <div id="fallback">
        You only see this message if your browser doesn't support canvas.
    </div>
<canvas>

    Und Ihre Funktion sollte vorangestellt werden:

    var context = document.getElementById('mycanvas').getContext('2d');

    Sollte dein code funktionieren. Sie brauchen, um den zeichenkontext eines <canvas> element zuerst, dann fügen Sie das Bild in diesem Kontext, und schließlich abrufen von pixel-Daten aus dem Kontext.

    Direkt zu Adresse, Ihren Kommentar oben, die Zeile

    var context = document.getElementById('barcode').getContext('2d');

    versucht den Rahmen von einem Bild-element, aber das ist nicht möglich. Man kann Sie nur anrufen getContext auf ein canvas-element.

    • Das funktionierte gut 😀 Danke! Ich hatte zwar zum Bearbeiten der Leinwand.Höhe und Leinwand.Breite einige andere Sache, aber es noch funktionierte. Danke.
    InformationsquelleAutor apsillers
Schreibe einen Kommentar