HTML5 キャンバスを使用して画像モザイクを実装する方法-H5 チュートリアル-php.cn

HTML5 キャンバスを使用して画像モザイクを実装する方法

不言

リリース： 2018-12-01 16:50:49

オリジナル

4477 人が閲覧しました

HTML5 キャンバスは多くの画像の問題を処理できますが、HTML5 キャンバスを使用して画像モザイクを実現するにはどうすればよいでしょうか?この記事では、HTML5キャンバスに画像モザイクを実装する方法を紹介します。具体的な内容を一緒に見ていきましょう。

HTML5 canvas

#最初にコードを与えてから分析します

HTML5 キャンバスは次のように画像モザイクコードを実装します

<!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>

ログイン後にコピー

説明:

body タグの on 関数は、ページ表示時に描画機能を実行します。

draw 関数は、メモリ内に HTML キャンバスオブジェクトを作成し、元の画像を読み取り、キャンバス上に描画します。レンダリングされたキャンバスオブジェクトの getImageData メソッドを呼び出して、ピクセル情報を取得します。

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

ログイン後にコピー

モザイク処理は、読み込んだ元画像の幅と高さ、HTMLキャンバスのコンテキスト、モザイクのサイズ、元画像のピクセル情報を用いて行われます。モザイク処理は CreateMosaic() 関数によって実装されます。画像のピクセル情報サイズは大きいため、CreateMosaic()関数のパラメータには格納されず、グローバル変数に格納されます。コードの可読性を向上させたい場合は、CreateMosaic() 関数のパラメーターに構造体を与えることができます。

CreateMosaic のループを使用して、モザイクサイズに基づいてピクセル値を取得します。モザイクサイズが 4 の場合、4 ピクセルごとのピクセル値を取得し、取得したピクセル値の色を使用して正方形を描画できます。キャンバス上のモザイクサイズ

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

ログイン後にコピー

実行結果:

HTML5 キャンバスを使用して画像モザイクを実装する方法

モザイクの程度の変更

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

ログイン後にコピー

CreateMosaicの第4パラメータの値モザイクの深さを変更できます。

第 4 パラメータ値が 4 の場合の画像のモザイク効果

HTML5 canvas

第 4 パラメータ値が 2 の場合の画像モザイク効果＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

以上がHTML5 キャンバスを使用して画像モザイクを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。