Canvas ist wirklich eine magische Sache. Es kann nicht nur verschiedene Grafiken, Texte und Bitmaps zeichnen, sondern auch komplexe Pixeloperationen und -verarbeitungen an Bitmaps durchführen. Daher können Dinge wie Filter tatsächlich mit Canvas implementiert werden. Als nächstes ist es an der Zeit, Zeuge eines Wunders zu werden.
Zuerst benötigen wir einen Canvas-Container, zum Beispiel:
<canvas id=myCanvas width=800 height=800></canvas>
Als nächstes müssen wir Canvas verwenden, um ein Bild zu zeichnen:
var myCanvas = document.getElementById(myCanvas);var ctx = myCanvas.getContext(2d);var img = new Image();img.src = ./images/1526010092000.jpg;// Bereiten Sie Ihren eigenen Bildlink img.onload vor = (e) => {ctx.drawImage(img, 0, 0, 800, 800);//Die ersten 800 repräsentieren die Breite des gezeichneten Bildes und die zweiten 800 repräsentieren die Höhe des gezeichneten Bildes}Die Wirkung der ersten Leinwandzeichnung
Der nächste Schritt besteht darin, einige Operationen an den Pixeln des Bildes durchzuführen. Um einen solchen Vorgang zu implementieren, müssen Sie zunächst die Pixelinformationen des Bildes von Canvas abrufen. Diese Informationen können über getImageData() abgerufen werden.
// ... Den vorherigen Code weglassen img.onload = (e) => {// ... Den vorherigen Code weglassen img = ctx.getImageData(0, 0, 800, 800); // Die Farbe von jedem erhalten Pixel-Byte-Daten}Da die Bildgröße 800 * 800 beträgt, müssen die Pixel durchlaufen werden, um die Rot-, Grün- und Blauwerte jedes Pixels zu erhalten. daher:
// ... Den vorherigen Code weglassen img.onload = (e) => {// ... Den vorherigen Code weglassen var pixelLen = 800 * 800; // Anzahl der Pixel abrufen for(var i = 0; i < pixelLen * 4; i += 4) { var redC = img.data[i], // Die erste Byte-Einheit repräsentiert rot greenC = img.data[i + 1], // Die zweite Byte-Einheit repräsentiert grün blueC = img.data[i + 2], // Die dritte Byte-Einheit repräsentiert blau alpha = img.data[i + 3] // Die vierte Byte-Einheit repräsentiert Transparenz}}Durch die obige Schleife erhalten wir den spezifischen Farbwert jedes in den Bilddaten enthaltenen Pixels. Zu beachten ist, dass die Daten jedes Pixels nicht aus einem Bit bestehen, sondern aus vier benachbarten Bits, die jeweils die roten, grünen und Blau und Transparenzwerte des Punktes. Daher entspricht die Array-Länge der Bitmap-Bytedaten tatsächlich der Anzahl der Pixel multipliziert mit 4. In der for-Schleife behandeln wir diese Funktion auch entsprechend.
Durch die Mittelung der Rot-, Grün- und Blauwerte jedes Punkts und die anschließende Zuweisung des generierten Durchschnittswerts zu den Rot-, Grün- und Blauwerten des Pixels kann schließlich ein Graustufeneffekt gebildet werden: putImageData() -Methode wird verwendet, um das Bild neu zu zeichnen. Der Code lautet wie folgt:
// ... Den vorherigen Code weglassen img.onload = (e) => { // ... Den vorherigen Code weglassen for(var i = 0; i < pixelLen * 4; i += 4) { // . .. Den vorherigen Code weglassen var grey = parseInt((redC + greenC + blueC) / 3); // Den Grauwert nach der Mittelung ermitteln img.data[i] = grey; // Den Rotwert ändern img.data[i + 1] = grey; // Den grünen Wert ändern img.data[i + 2] = grey; // Den blauen Wert ändern} ctx.putImageData(img, 0, 0, 800, 800);Zu diesem Zeitpunkt entsteht ein Graustufeneffekt, wie unten gezeigt
Canvas zeichnet das Bild ein zweites Mal – Graustufeneffekt
Um die Transparenz zu steuern, müssen Sie nur den Wert ändern, der der vierten Byte-Einheit entspricht. Der Wertebereich liegt zwischen 0 und 256. 0 steht für vollständige Transparenz und 256 für vollständige Deckkraft. Zum Beispiel:
// ... Den vorherigen Code weglassen img.onload = (e) => { // ... Den vorherigen Code weglassen for(var i = 0; i < pixelLen * 4; i += 4) { // . .. Den vorherigen Code weglassen img.data[i + 3] = 128; // Transparenz 50 % } // ... Den vorherigen Code weglassen }Der dritte Zeicheneffekt der Leinwand erhöht die Transparenz
Dadurch kann der Effekt des Filters erreicht werden, indem der Wert von 4 Daten für jedes Pixel im Bild gesteuert wird.
Referenzen:
„HTML5-Grundkenntnisse, Kerntechnologien und hochmoderne Fälle“, herausgegeben von Liu Huan
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.