Einführung in die Schnittstelle zur Verwendung von HTML5 -Canvas -Pixelverarbeitung

Inhaltsübersicht: Dieser Artikel zeigt die gemeinsame Schnittstelle von Canvas in Bildpixeldatenoperationen durch einfache Codebeispiele und leicht obszöne Bilddemos. In Bezug auf die Verwendung dieser Schnittstellen, um komplexere Effekte zu erzielen, wird sie in den folgenden Kapiteln weiterhin diskutiert.

1. Leinwand Bildfüllung; 2. Setzen/Get Canvas -Bilddaten; 3. Erstellen Sie Canvas -Bilddaten; 4. Eine kleine Ergänzung zu Imagedata.Data; 5. Schreiben Sie es später

/**

* @Beschreibung

* @param {number} x Der Abstand vom linken Punkt des Bildes starten Zeichnungspunkt von Canvas

* @param {number} y Der Abstand zwischen dem Startpunkt der Bildzeichnung von oben auf der Leinwand

* @param {number} Breite die Breite des endgültigen Bildes auf Leinwand gezeichnet

* @param {number} Höhe Die Höhe des endgültigen Bildes auf Leinwand gezeichnet

*/

context.drawimage (Bild, X, Y, Breite, Höhe)

Demo_01 ist wie folgt:

<canvas id = draw_image_canvas style = Hintergrund: #ccc;> </canvas>

Funktion $ (id) {return document.getElementById (id); }

Funktion getImage (URL, Rückruf) {

var img = document.createelement ('img');

img.onload = function () {

Callback && Callback (this);

};

img.src = url;

document.body.appendchild (IMG);

}

Funktion Drawimage () {

var url = 'xiangjishi.png';

var canvas = $ ('Draw_image_canvas');

var context = canvas.getContext ('2d');

GetImage (URL, Funktion (img) {

canvas.width = img.width;

canvas.height = img.height;

var Offsetx = 20;

var offsety = 20;

var drawwidth = img.width/4;

var drawheight = img.height/4;

context.drawimage (IMG, OffsetX, Offsety, Drawwidth, Drawheight);

});

}

Drawimage ();

Demo Beschreibung: Load Xiangjishi.png. Zeichnen Sie nach dem Laden Xiangjishi.png auf die Leinwand, beginnend mit den Koordinaten (0, 0) relativ zur oberen linken Ecke der Leinwand. Der Effekt ist wie folgt:

Wenn Sie dies sehen, können Sie die Bedeutung der vier Parameter im Kontext nicht verstehen. Sie können einfach einige Parameter ändern, um den Effekt zu sehen:

var Offsetx = 20;

var offsety = 20;

var drawwidth = img.width/2;

var drawheight = img.height/2;

context.drawimage (IMG, OffsetX, Offsety, Drawwidth, Drawheight);

Der modifizierte Demo -Effekt ist wie folgt. In Kombination mit der obigen API -Beschreibung sollte es nicht schwierig sein, die Bedeutung der vier Parameter zu verstehen.

context.drawimage (Bild, X, Y, Breite, Höhe)

/**

* @Description erhalten Pixelinformationen für einen bestimmten Bereich von Leinwand

* @param {number} x Der Abstand vom linken Punkt der Informationen, um den Abstand von der Leinwand zu erhalten

* @param {number} y Die Startentfernung vom oberen Rand der Leinwand für Informationen

* @param {number} Breite die erhaltene Breite

* @param {number} Höhe Die endgültige Höhe

*/

context.getImagedata (x, y, breite, Höhe)

Diese Methode gibt ein Imagedata -Objekt zurück, das drei Haupteigenschaften hat:

Imagedata.Width: Wie viele Elemente gibt es pro Zeile

Imagedata.Height: Wie viele Elemente gibt es pro Spalte

Imagedata.Data: Eindimensionales Array, das den RGBA-Wert jedes von Leinwand erhaltenen Pixel speichert. Dieses Array spart vier Werte für jedes Pixel - Rot, Grün, Blau und Alpha -Transparenz. Jeder Wert liegt zwischen 0 und 255. Daher wird jedes Pixel auf Leinwand in diesem Array zu vier ganzzahligen Werten. Die Reihenfolge der Füllung des Arrays erfolgt von links nach rechts von oben nach unten.

/**

* @Description setzen die Pixelinformationen eines bestimmten Bereichs mit einem bestimmten Imagedata

* @param {number} x Starten Sie aus dem x -Punkt von Canvas

* @param {number} y Starten Sie aus dem Y -Punkt von Canvas

* @param {number} Breite die erhaltene Breite

* @param {number} Höhe Die endgültige Höhe

*/

context.putimagedata (Imagedata, x, y)

Das Folgende ist das Kombinieren von Demo_2, um die Verwendung von getImagedata () und die entsprechende Bedeutung jedes Parameters zu erklären

Der Quellcode von Demo_02 ist wie folgt und wird basierend auf demo_01 leicht geändert:

<canvas id = "draw_image_canvas" style = "Hintergrund: #cc;"> </canvas>

<canvas id = "get_image_canvas" style = "Hintergrund: #cc;"> </canvas>

Funktion getAandImagedata () {

var url = 'xiangjishi.png';

GetImage (URL, Funktion (img) {

$ ('draw_image_canvas'). width = img.width;

$ ('draw_image_canvas'). height = img.height;

var context = $ ('draw_image_canvas'). getContext ('2d');

context.drawimage (img, 0, 0, img.width, img.height);

// Pixelinformationen erhalten

var offsetx = img.width/2;

var offsety = img.height/2;

var getImgwidth = img.width/2;

var getImgHeight = img.height/2;

var imgagedata = context.getImagedata (OffsetX, Offsety, getImgwidth, getImgHeight);

// Pixelinformationen festlegen, den spezifischen Code hier zuerst ignorieren, wissen Sie, dass die oben erhaltenen Pixelinformationen in einer anderen Leinwand intakt platziert sind

var startx = 0;

var starty = 0;

var ct = $ ('get_image_canvas'). getContext ('2d');

$ ('get_image_canvas'). width = img.width;

$ ('get_image_canvas'). height = img.height;

ct.putimagedata (imgagedata, startx, starty);

});

}

Zu diesem Zeitpunkt kann die Bedeutung, die den vier Parametern der GetImagedata -Methode entspricht, im Grunde genommen gelöscht werden. Es ist nicht schwierig, Putimagedata -Parameter zu verstehen. Nachdem Sie den Code von Demo_2 leicht geändert haben, werden Sie ihn nach dem Betrachten des Effekts kennen.

Funktion getAandImagedata () {

var url = 'xiangjishi.png';

GetImage (URL, Funktion (img) {

$ ('draw_image_canvas'). width = img.width;

$ ('draw_image_canvas'). height = img.height;

var context = $ ('draw_image_canvas'). getContext ('2d');

context.drawimage (img, 0, 0, img.width, img.height);

// Pixelinformationen erhalten

var offsetx = img.width/2;

var offsety = img.height/2;

var getImgwidth = img.width/2;

var getImgHeight = img.height/2;

var imgagedata = context.getImagedata (OffsetX, Offsety, getImgwidth, getImgHeight);

// Pixelinformationen festlegen

var startx = img.width/2; // das war ursprünglich 0

var starty = img.width/2; // das war ursprünglich 0

var ct = $ ('get_image_canvas'). getContext ('2d');

$ ('get_image_canvas'). width = img.width;

$ ('get_image_canvas'). height = img.height;

ct.putimagedata (imgagedata, startx, starty);

});

}

Der DEMO_3 -Display -Effekt ist wie folgt. Wenn Sie jedoch versuchen, einige Parameter selbst zu ändern, können Sie ein besseres Verständnis haben:

/**

* @Description streift einen Satz von Bilddaten vor und binde an das Canvas-Objekt

* @param {number} Breite, die durch Breite erstellt wurde

* @param {number} Höhe erstellte Höhe

*/

Kontext.Createimagedata (Breite, Höhe)

Die Schnittstelle ist relativ einfach und die erstellten Daten können genauso verarbeitet werden wie die mit GetImagedata erhaltenen Daten. Hier muss nur beachtet werden, dass dieser Satz von Bilddaten möglicherweise nicht unbedingt den aktuellen Stand der Leinwand widerspiegelt.

Darüber hinaus gilt in "HTML5 Advanced Programing" und in vielen Artikeln imagedata.data als Array, aber tatsächlich:

Imagedata.Data gibt kein echtes Array zurück, sondern ein Objekt des Klassenarrays, das die Art von Imagedata.Data ausdrucken kann.

console.log (Object.Prototype.toString.call (imgagedata.data)); // Ausgabe: [Objekt Uint8Clampedarray]

Drucken Sie dann den spezifischen Inhalt von Imagedata.Data aus. Der Inhalt ist lang. Nur die ersten und letzten Absätze sind zu sehen:

Imagedata.Data ist eigentlich ein Objekt, dessen Index von 0 beginnt und bis zur Breite*4-1 endet.

Warum nicht direkt in Arrays speichern? Da die Länge des Arrays eine Obergrenze aufweist, unter der Annahme, dass es sich um eine Grenzwert handelt, werden Elemente, die die Grenzwert überschreiten, in Schlüsselwerten gespeichert. Beispielsweise ist Data [LimitLength + 100] tatsächlich Daten ['LimitLength + 100 +' '] (ich kann mich nicht an den spezifischen Wert von LimitLength erinnern, wenn Sie interessiert sind, können Sie es überprüfen).

Was die Bytelength-, Byteoffset- und Puffereigenschaften am Ende betrifft, haben wir nicht eingehend untersucht und werden es hier nicht erweitern, um irreführende Leser zu verhindern.

Begrenztes Niveau, bitte weisen Sie auf, ob Fehler auftreten