Canvas-Lern- und Filterimplementierungscode

Im Zeitalter der Verbreitung digitaler Produkte ist das Fotografieren zu einem unverzichtbaren Bestandteil des Lebens geworden. Egal, ob Sie zu Hause, auf Reisen oder auf Reisen sind, Sie werden immer schöne Fotos machen. Doch zwischen den direkt von der Kamera aufgenommenen Fotos und unseren psychologischen Erwartungen besteht oft eine gewisse Lücke. Wie lässt sich diese Lücke schließen? Die Antwort sind Beauty-P-Pictures, also tauchen alle Arten von Beauty-Kameras auf und P-Pictures sind zu einer tragbaren Fähigkeit geworden.

Tatsächlich ist die sogenannte Schönheit nichts anderes als die kombinierte Verwendung vieler Filter, und Filter verwenden bestimmte Algorithmen, um Bildpixel zu manipulieren, um einige spezielle Bildeffekte zu erzielen. Freunde, die Photoshop verwendet haben, wissen, dass es in PS viele Filter gibt. Im Folgenden werden wir die js-Canvas-Technologie verwenden, um mehrere Filtereffekte zu erzielen.

Kürzlich habe ich das Highlight von HTML5 kennengelernt – canvas . Mithilfe von Canvas kann das Front-End-Personal die Bildverarbeitung problemlos durchführen. Es gibt viele APIs. Dieses Mal werde ich hauptsächlich die häufig verwendeten APIs lernen und die folgenden zwei Codes vervollständigen:

• Entfärbungsfilter implementieren
• Implementieren Sie einen Negativfarbfilter (Umkehrfarbe).

Dieses HTML-Element ist für clientseitige Vektorgrafiken konzipiert. Es weist kein eigenes Verhalten auf, sondern stellt dem Client-JavaScript eine Zeichen-API zur Verfügung, sodass das Skript auf einer Leinwand zeichnen kann, was es möchte.

Ein wichtiger Unterschied zwischen <canvas> -Tag und SVG und VML besteht darin, dass <canvas> über eine JavaScript-basierte Zeichen-API verfügt, während SVG und VML ein XML-Dokument zum Beschreiben von Zeichnungen verwenden.

Der Großteil der Canvas-Zeichnungs-API ist nicht im <canvas> -Element selbst definiert, sondern in einem Zeichenumgebungsobjekt, das über die getContext() Methode des Canvas abgerufen wird. Die Standardbreite und -höhe des <canvas> -Elements selbst betragen 300 Pixel bzw. 150 Pixel.

 // Das Canvas-Element verarbeiten var c = document.querySelector(#my-canvas);c.width = 150;c.height = 70; // Das Kontextobjekt auf dem angegebenen Canvas-Tag abrufen var ctx = c.getContext(2d ); ctx.fillStyle = #FF0000; // Farbe ctx.fillRect(0, 0, 150, 75);

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.moveTo(0, 0); //Startkoordinate ctx.lineTo(200, 100); //Endkoordinate ctx .Stroke(); // Sofort zeichnen

Für ctx.arc() lauten die fünf Parameter: (x,y,r,start,stop) . Dabei sind x und y die Koordinaten des Kreismittelpunkts und r der Radius.

Die Einheiten für start und stop sind Bogenmaß . Nicht Länge, nicht Grad.

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.beginPath();ctx.arc(95, 50, 40, 0, 2 * Math.PI);ctx. Schlaganfall();

 var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);ctx.font = 30px Arial;ctx.fillText(Hello World, 10, 50);

Bezüglich der Bildverarbeitungs-APIs gibt es hauptsächlich vier:

Ein Bild zeichnen: drawImage(img,x,y,width,height) oder drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

Bilddaten abrufen: getImageData(x,y,width,height)

Bilddaten neu schreiben: putImageData(imgData,x,y[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

Bild exportieren: toDataURL([type, encoderOptions])

Ausführlichere API- und Parameterbeschreibungen finden Sie unter: Erläuterung der API-Parameter für die Canvas-Bildverarbeitung

Basierend auf diesen APIs können wir unsere Bilder im canvas -Element zeichnen. Angenommen, unser Bild ist ./img/photo.jpg .

 <script> window.onload = function () { var img = new Image() // Neues Bildobjekt deklarieren img.src = ./img/photo.jpg // Nachdem das Bild geladen wurde img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = canvas.getContext(2d); Geben Sie entsprechend der Bildgröße die Leinwandgröße an img.width canvas.height = img.height // Das Bild zeichnen ctx.drawImage(img, 0, 0, canvas.width, canvas.height) } </script>

Wie in der Abbildung unten gezeigt, wird das Bild in die Leinwand gezeichnet:

Hier leihen wir uns hauptsächlich die Funktion getImageData aus, die den RGBA-Wert jedes Pixels zurückgibt. Mithilfe von Bildverarbeitungsformeln können Sie Pixel manipulieren, um entsprechende mathematische Operationen durchzuführen.

Der Farbentfernungseffekt entspricht den Schwarzweißfotos, die mit alten Kameras aufgenommen wurden. Basierend auf der Empfindlichkeit des menschlichen Auges haben die Menschen die folgende Formel angegeben:

gray = red * 0.3 + green * 0.59 + blue * 0.11

Der Code lautet wie folgt:

 <script> window.onload = function () { var img = new Image() img.src = ./img/photo.jpg img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = Canvas.getContext(2d); Canvas.width = img.width Canvas.height = img.height ctx.drawImage(img, 0, 0, Canvas.width, Canvas.height) // Filterverarbeitung starten var imgData = ctx.getImageData(0, 0, Canvas.width, Canvas.height); for (var i = 0; i < imgData.data . Länge / 4; ++i) { var red = imgData.data[i * 4], green = imgData.data[i * 4 + 1], blue = imgData.data[i * 4 + 2]; var grey = 0,3 * red + 0,59 * green + 0,11 * blue; // Grau berechnen // RGB aktualisieren, Hinweis: // imgData.data[i * 4 + 3] ist gespeichert ist Alpha, keine Änderung erforderlich imgData.data[i * 4] = grey; 4 + 2] = grey; } ctx.putImageData(imgData, 0, 0); // Bilddaten neu schreiben} </script>

Der Effekt ist wie folgt:

4.2 Negativer Farbeffekt

Der negative Farbeffekt besteht darin, den aktuellen Wert vom Maximalwert zu subtrahieren. Der theoretische maximale numerische Wert in RGB, der von getImageData erhalten wird, beträgt: 255. Die Formel lautet also wie folgt:

new_val = 255 - val

Der Code lautet wie folgt:

 <script> window.onload = function () { var img = new Image() img.src = ./img/photo.jpg img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = Canvas.getContext(2d); Canvas.width = img.width Canvas.height = img.height ctx.drawImage(img, 0, 0, Canvas.width, Canvas.height) // Filterverarbeitung starten var imgData = ctx.getImageData(0, 0, Canvas.width, Canvas.height); for (var i = 0; i < imgData.data . Länge / 4; ++i) { var red = imgData.data[i * 4], green = imgData.data[i * 4 + 1], blue = imgData.data[i * 4 + 2]; // RGB aktualisieren, Hinweis: // imgData.data[i * 4 + 3] speichert Alpha, keine Änderung erforderlich imgData.data[i * 4] = 255 - imgData. data[i * 4]; imgData.data[i * 4 + 1] = 255 - imgData.data[i * 4 + 1]; * 4 + 2] = 255 - imgData.data[i * 4 + 2]; } ctx.putImageData(imgData, 0, 0); // Bilddaten neu schreiben} </script>

Die Darstellungen lauten wie folgt:

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