Heim >Web-Frontend >H5-Tutorial >So verwenden Sie HTML5-Canvas zum Implementieren von Bildmosaiken
HTML5-Canvas kann viele Bildprobleme bewältigen. Wie kann man also mit HTML5-Canvas ein Bildmosaik realisieren? In diesem Artikel erfahren Sie, wie Sie ein Bildmosaik im HTML5-Canvas implementieren. Schauen wir uns gemeinsam den spezifischen Inhalt an.
Wir geben zuerst den Code und analysieren ihn dann
Der Mosaikcode des HTML5-Canvas-Implementierungsbildes lautet wie folgt
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script type="text/javascript"> var imageData; function draw() { var canvas = document.getElementById('SimpleCanvas'); var mem_canvas = document.createElement('canvas'); if (!canvas || !canvas.getContext) { return false; } var context = canvas.getContext('2d'); var img = new Image(); img.onload = function onImageLoad() { mem_canvas.width = img.width; mem_canvas.height = img.height; var mem_context = mem_canvas.getContext('2d'); mem_context.drawImage(img, 0, 0); imageData = mem_context.getImageData(0, 0, mem_canvas.width, mem_canvas.height); CreateMosaic(mem_context, mem_canvas.width, mem_canvas.height, 8); context.drawImage(mem_canvas, 32, 32); } img.src = 'img/luffy.jpg'; } function CreateMosaic(context, width,height,mosaicSize) { var x=0; var y=0; for (y = 0; y < height; y = y + mosaicSize) { for (x = 0; x < width; x = x + mosaicSize) { var cR = imageData.data[(y * width + x) * 4]; var cG = imageData.data[(y * width + x) * 4 + 1]; var cB = imageData.data[(y * width + x) * 4 + 2]; context.fillStyle = "rgb("+cR+","+cG+","+cB+")"; context.fillRect(x, y, x + mosaicSize, y + mosaicSize); } } } </script> </head> <body onload="draw()" style="background-color:#D0D0D0;"> <canvas id="SimpleCanvas" width="640" height="360" style="background-color:#FFFFFF;"></canvas> <div>Canvas Demo</div> <div id="output"></div> </body> </html>
Beschreibung:
Die On-Funktion des Body-Tags führt die Zeichenfunktion aus, wenn die Seite angezeigt wird.
Die Zeichenfunktion erstellt ein HTML-Canvas-Objekt im Speicher, liest das Originalbild und zeichnet es auf die Leinwand. Rufen Sie die getImageData-Methode des gerenderten Canvas-Objekts auf, um Pixelinformationen abzurufen.
function draw() { var canvas = document.getElementById('SimpleCanvas'); var mem_canvas = document.createElement('canvas'); if (!canvas || !canvas.getContext) { return false; } var context = canvas.getContext('2d'); var img = new Image(); img.onload = function onImageLoad() { mem_canvas.width = img.width; mem_canvas.height = img.height; var mem_context = mem_canvas.getContext('2d'); mem_context.drawImage(img, 0, 0); imageData = mem_context.getImageData(0, 0, mem_canvas.width, mem_canvas.height); CreateMosaic(mem_context, mem_canvas.width, mem_canvas.height, 8); context.drawImage(mem_canvas, 32, 32); } img.src = 'img/luffy.jpg'; }
führt die Mosaikverarbeitung unter Verwendung der Lesebreite und -höhe des Originalbilds, des Kontexts der HTML-Leinwand, der Größe des Mosaiks und der Pixelinformationen des Originalbilds durch. Die Mosaikverarbeitung wird durch die Funktion CreateMosaic() implementiert. Da die Pixelinformationsgröße des Bildes groß ist, wird sie nicht in den Parametern der Funktion CreateMosaic() gespeichert, sondern in einer globalen Variablen. Wenn Sie die Lesbarkeit Ihres Codes verbessern möchten, können Sie den Parametern der Funktion CreateMosaic() eine Struktur geben.
Verwenden Sie eine Schleife in CreateMosaic, um den Pixelwert basierend auf der Mosaikgröße zu erhalten. Wenn die Mosaikgröße 4 beträgt, können Sie den Pixelwert aller 4 Pixel abrufen und die Farbe des erhaltenen Pixelwerts zum Zeichnen des Quadrats verwenden Mosaikgröße auf der Leinwand.
function CreateMosaic(context, width,height,mosaicSize) { var x=0; var y=0; for (y = 0; y < height; y = y + mosaicSize) { for (x = 0; x < width; x = x + mosaicSize) { var cR = imageData.data[(y * width + x) * 4]; var cG = imageData.data[(y * width + x) * 4 + 1]; var cB = imageData.data[(y * width + x) * 4 + 2]; context.fillStyle = "rgb("+cR+","+cG+","+cB+")"; context.fillRect(x, y, x + mosaicSize, y + mosaicSize); } } }
Laufergebnisse:
Änderungen im Mosaikgrad
CreateMosaic(mem_context, mem_canvas.width, mem_canvas.height, 8);
Ändern Sie einfach die Wert des vierten Parameters von CreateMosaic Sie können die Tiefe des Mosaiks ändern.
Der Mosaikeffekt des Bildes, wenn der vierte Parameterwert 4 ist
Das Bild, wenn der vierte Parameterwert 2 Mosaik ist Wirkung
Das obige ist der detaillierte Inhalt vonSo verwenden Sie HTML5-Canvas zum Implementieren von Bildmosaiken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!