So verwenden Sie HTML5-Canvas zum Implementieren von Bildmosaiken-H5-Tutorial-php.cn

So verwenden Sie HTML5-Canvas zum Implementieren von Bildmosaiken

不言

Freigeben： 2018-12-01 16:50:49

Original

4477 Leute haben es durchsucht

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.

HTML5 canvas

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(&#39;SimpleCanvas&#39;);      
      var mem_canvas = document.createElement(&#39;canvas&#39;);      
      if (!canvas || !canvas.getContext) {
              return false;
      }      
      var context = canvas.getContext(&#39;2d&#39;);      
      var img = new Image();
      img.onload = function onImageLoad() {
        mem_canvas.width = img.width;
        mem_canvas.height = img.height;        
      var mem_context = mem_canvas.getContext(&#39;2d&#39;);
        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 = &#39;img/luffy.jpg&#39;; 
    }    
      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>

Nach dem Login kopieren

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(&#39;SimpleCanvas&#39;);      
         var mem_canvas = document.createElement(&#39;canvas&#39;);
      if (!canvas || !canvas.getContext) {
                 return false;
      }
      var context = canvas.getContext(&#39;2d&#39;);
      var img = new Image();
      img.onload = function onImageLoad() {
        mem_canvas.width = img.width;
        mem_canvas.height = img.height;
        var mem_context = mem_canvas.getContext(&#39;2d&#39;);
        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 = &#39;img/luffy.jpg&#39;; 
    }

Nach dem Login kopieren

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);
        }
      }
    }

Nach dem Login kopieren

Laufergebnisse:

So verwenden Sie HTML5-Canvas zum Implementieren von Bildmosaiken

Änderungen im Mosaikgrad

CreateMosaic(mem_context, mem_canvas.width, mem_canvas.height, 8);

Nach dem Login kopieren

Ä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

HTML5 canvas

Das Bild, wenn der vierte Parameterwert 2 Mosaik ist Wirkung

HTML5 canvas

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!