Erfahren Sie, wie Sie Canvas zum Verarbeiten von Bildern verwenden

Canvas, auf Chinesisch als Canvas übersetzt, verfügt in HTML5 über ein neues <canvas>-Element, das mit JavaScript kombiniert werden kann, um Grafiken dynamisch im Canvas zu zeichnen.

Heute werden wir nicht über das Zeichnen von Grafiken in Canvas sprechen, sondern über die Verarbeitung von Bildern.

Der Prozess ist wahrscheinlich sehr einfach und gliedert sich hauptsächlich in die folgenden drei Schritte:

Ja, so einfach, wie einen Elefanten in einen Kühlschrank zu packen, haha.

Die wichtigsten Canvas-APIs, die im gesamten Prozess verwendet werden, sind:

1. Ein Bild zeichnen: drawImage()
2. Bilddaten abrufen: getImageData()
3. Bilddaten neu schreiben: putImageData()
4. Bild exportieren: toDataURL()

Wie der Name schon sagt, wird diese Methode zum Zeichnen von Bildern auf der Canvas-Leinwand verwendet. Es gibt drei spezifische Verwendungszwecke:

① Positionieren Sie das Bild auf der Leinwand: context.drawImage(img,x,y)

② Positionieren Sie das Bild auf der Leinwand und geben Sie die Breite und Höhe des Bildes an: context.drawImage(img,x,y,width,height)

③ Schneiden Sie das Bild aus und positionieren Sie den ausgeschnittenen Teil auf der Leinwand: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

Die oben genannten Parameterwerte werden in der folgenden Tabelle beschrieben:

Diese Methode wird verwendet, um Bilddaten von der Canvas-Leinwand abzurufen. Die spezifische Verwendung ist wie folgt:

Rufen Sie die Pixeldaten innerhalb des angegebenen rechteckigen Bereichs der Leinwand ab: var ImageData = context.getImageData(x,y,width,height)

Die oben genannten Parameterwerte werden in der folgenden Tabelle beschrieben:

Diese Methode gibt ein ImageData-Objekt mit drei Eigenschaften zurück: Breite, Höhe und Daten. Das Datenarray verwenden wir hauptsächlich, da es die Daten jedes Pixels im Bild speichert. Nachdem wir diese Daten haben, können wir sie verarbeiten und sie schließlich in die Canvas-Leinwand umschreiben, um so die Verarbeitung und Konvertierung der Bilder zu realisieren. Die spezifische Verwendung des Datenarrays können wir in den folgenden Beispielen sehen.

Diese Methode ist sehr einfach und wird zum Umschreiben von Bilddaten in die Canvas-Leinwand verwendet. Die spezifische Verwendung ist wie folgt:

 context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

Die oben genannten Parameterwerte werden in der folgenden Tabelle beschrieben:

Diese Methode unterscheidet sich von den oben genannten drei Methoden. Sie ist eine Methode des Canvas-Objekts. Diese Methode gibt eine Zeichenfolge zurück, die den Daten-URI enthält. Diese Zeichenfolge kann direkt als Bildpfadadresse zum Ausfüllen des src-Attributs verwendet werden >-Tag. Im Einzelnen ist die Verwendung wie folgt:

 var dataURL = canvas.toDataURL(type, EncoderOptions);

Die oben genannten Parameterwerte werden in der folgenden Tabelle beschrieben:

In diesem Beispiel wird kurz vorgestellt, wie Farbbilder mithilfe von Code in Schwarzweißbilder verarbeitet werden.

 <!--HTML--><canvas id=canvas width=600 height=600></canvas><input id=handle type=button value=Bilder verarbeiten/><input id=create type=button value=Bilder generieren /><div id=result></div>

 //JavaScriptwindow.onload = function(){ var canvas = document.getElementById(canvas), //Holen Sie sich das Canvas-Canvas-Objekt context = canvas.getContext('2d'); //Holen Sie sich das 2D-Kontextobjekt, die meisten Canvas-APIs sind es Diese Objektmethode var image = new Image(); //Definieren Sie ein Bildobjekt image.src = 'imgs/img.jpg'; //Sie müssen hier aufpassen! Alle nachfolgenden Vorgänge müssen ausgeführt werden, nachdem das Bild erfolgreich geladen wurde. Andernfalls wird das Bild verarbeitet. invalid context.drawImage(image,0,0); // Beginnen Sie mit dem Zeichnen des Bildes in der oberen linken Ecke (0,0) der Leinwand Die Standardgröße ist die tatsächliche Größe des Bildes. var handle = document.getElementById(handle); var create = document.getElementById(create); // Klicken Sie auf die Bildverarbeitungsschaltfläche, um das Bild zu verarbeiten var imgData = context.getImageData(0,0,canvas.width,canvas.height); //Das Bilddatenobjekt abrufen var data = imgData.data; Jedes Pixel im Array wird mit 4 Elementen gespeichert. Stellt Rot-, Grün-, Blau- und Transparenzwerte dar. var Average = 0 for (var i = 0; i < data.length; i+=4) { Average = Math.floor((data[i]+data[i+1]+data[i+2])/3); // Mitteln Sie die Rot-, Grün- und Blauwerte, um den Graustufenwert zu erhalten data[i] = data[i+1] = data[i+2] = Average; Den Farbwert jedes Pixels neu schreiben} imgData.data = data context.putImageData(imgData,0,0); // Schreiben Sie die verarbeiteten Bilddaten in die Canvas-Leinwand um und das Bild in der Canvas wird schwarzweiß}; create.onclick = function(){ // Klicken Sie auf die Schaltfläche „Bild generieren“, um das Bild zu exportieren var imgSrc = canvas.toDataURL( ); //Daten-URL des Bildes abrufen var newImg = new Image(); var result = document.getElementById(result); //den Bildpfad src zuweisen result.innerHTML = ''; result.appendChild(newImg);

Möglicherweise ist der obige Code nicht sehr gut geschrieben und scheint nicht so leicht zu verstehen. Es ist am besten, ihn selbst zu schreiben, damit Sie ihn besser verstehen können.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.