HTML5 Canvas-Pixelverarbeitung

HTML5 Verwendung des createImageData()-Funktion für die Canvas-Pixelverarbeitung, Online-Beispiel zur Demonstration der Canvas-Pixelverarbeitung, wie man Pixel auf die Leinwand kopiert, die Syntaxdefinition und detaillierte Informationen zu seinen Attributwerten usw.

zugänglich5Die verschiedenen Pixel des Bildes. Sie können das ImageData-Objekt verwenden, um dies zu tun. Das ImageData-Objekt enthält ein Pixel-Array. Durch den Zugriff auf dieses Array können Sie Pixel manipulieren. Nach Abschluss der Pixeloperationen müssen Sie die Pixel auf das Bild kopieren, um sie anzuzeigen.

Erstellen eines ImageData-Objekts

Das Erstellen eines ImageData-Objekts erfolgt durch2D durchgeführte createImageData(). Dies ist ein Beispiel:

var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
var width =　100;
var height =　100;
var imageData = context.createImageData(width,          height);

Die width- und height-Attribute der Funktion createImageData() setzen die Breite und Höhe des durch das ImageData erstellten Objekts darstellten Pixelbereichs (in Pixeln). Der obige Beispielcode erstellt ein ImageData mit100 x 10Objekt mit einer Fläche von 0 Pixeln.

ImageData-Attribute

Das ImageData-Objekt hat drei Attribute:

• width

• height

• data

Die width- und height-Attribute enthalten die Breite und Höhe des angegebenen Grafikdatenbereichs.
Das data-Attribut ist ein Byte-Array, das die Pixelwerte enthält.

Pixelverarbeitung

　Jeder Pixel im data-Array enthält4Wert in Bytes. Rot, Grün und Blau sind ein Wert, der Alpha-Kanal ist ein Wert. Die Farbe des Pixels wird durch die Kombination von Rot, Grün und Blau zur Bildung der endgültigen Farbe bestimmt. Der Alpha-Kanal beschreibt die Transparenz des Pixels. Jeder von Rot, Grün, Blau und Alpha kann einen Wert zwischen 0 und255zwischen den Werten.
Dies ist ein Beispielcode, um die Farbe und den Alpha-Wert des ersten Pixels zu setzen:

var pixelIndex = 0;
imageData.data[pixelIndex          ] =　255;　　//　rot
imageData.data[pixelIndex　+　1] =             0;　　//　green color
imageData.data[pixelIndex　+　2] =             0;　　//　blue color
imageData.data[pixelIndex　+　3] =　255;

Bitte verwenden Sie den folgenden Code, um den Pixelwert zu lesen:

var pixelIndex = 0;
var red = imageData.data[pixelIndex          ];　　//　rot
var green = imageData.data[pixelIndex　+　1];　　//　green color
var blue = imageData.data[pixelIndex　+　2];　　//　blue color
var alpha = imageData.data[pixelIndex　+　3];

Um den Wert des pixelIndex für den nächsten Pixel zu erreichen, erhöhen Sie bitte seinen Wert4Jeder Pixel besteht aus4bestehend aus einer Anzahl von Array-Elementen, wie oben gezeigt).
Sie können den Index eines bestimmten Pixels wie folgt berechnen:

　var index =　4　*　(x　+　y　*　);

Die x und y in der Berechnung sind die Indexe, die durch die x- und y-Koordinaten der Pixel berechnet werden. Die Pixel werden in einem langen Pixelreihe organisiert, beginnend mit dem linken oberen Pixel, horizontal nach rechts. Wenn das Ende der Zeile erreicht wird, setzt die Pixelreihe am linken oberen Pixel der nächsten Zeile fort. Daher müssen Sie die y-Koordinate mit der Anzahl der Pixel pro Zeile multiplizieren und dem x-Wert hinzufügen, um den Index des Pixels an Position x zu berechnen.
Dies ist eine Erklärung20 Pixel breit und8Bild der imageData-Pixelmatrix. In der rechten Marginal列出了每行像素的索引。 Wie Sie sehen können, beginnt die Enumeration von der linken oberen Ecke mit 0 und nimmt nach rechts zu. Wenn die Kante der Zeile erreicht wird, beginnt die Enumeration vom linken oberen Pixel der unteren Zeile und setzt sich nach rechts fort.

Pixel auf die Leinwand kopieren

Nachdem die Pixel verarbeitet wurden, kann2Die Funktion D-Kontext kopiert es auf die Leinwand mit putImageData(). Es gibt zwei Versionen der putImageFunction(). Die erste Version der Funktion putImageData() kopiert alle Pixel auf die Leinwand. Dies ist ein Beispiel:

var canvasX =　25;
var canvasY =　25;
context.putImageData(imageData, canvasX, canvasY);

Die Parameter canvasX und canvasY sind die x- und y-Koordinaten, an denen die Pixel in die Leinwand eingefügt werden.
Die zweite Version der Funktion putImageData() kann den Pixelrechteck und nicht alle Pixel auf die Leinwand kopieren. Dies ist ein Beispielskript:

var canvasX =　25;
var canvasY =　25;
var sx = 0;
var sy = 0;
var sWidth =　25;
var sHeight =　25;
context.putImageData(imageData, canvasX, canvasY, sx, sy, sWidth, sHeight);

Die Parameter sx und sy (sourceX und sourceY) sind die x- und y-Koordinaten des linken oberen Ecks des Rechtecks, um aus dem Pixelarray zu kopieren.
Die sWidth- und sHeight-Parameter (sourceWidth und sourceHeight) sind die Breite und Höhe des Rechtecks, das aus dem Pixelarray kopiert wird.

Pixel von der Canvas holen

Es ist auch möglich, ein Pixelrechteck von der Leinwand in ein ImageData-Objekt zu holen. Dies wird durch die Funktion getImageData() erreicht. Hier ist ein Beispiel:

var x =　　25;
var y =　　25;
var width =　100;
var height =　100;
var imageData2　= context.getImageData(x, y, width, height);

Die x- und y-Parameter sind die Koordinaten vom linken oberen Ecke des Rechtecks.
Die width- und height-Parameter sind die Breite und Höhe des Rechtecks des Bildschirms, von dem sie kopiert werden.