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

ホームページ

ウェブフロントエンド

H5 チュートリアル

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

不言

Dec 01, 2018 pm 04:50 PM

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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLオーディオとビデオの理解：属性とアクセシビリティMay 16, 2025 am 12:05 AM

html5audioandvideolementsEnnhancedActivitionAndAcsibilitySpecificAttributes.1）The'Controls'AttributeaddsStandardPlayBackControls、while'aria-label'improvesscreenreaderAcsibility.2）

マスタリングマイクロダタ：HTML5のステップバイステップガイドMay 14, 2025 am 12:07 AM

MicrodatainHTML5enhancesSEOanduserexperiencebyprovidingstructureddatatosearchengines.1)Useitemscope,itemtype,anditempropattributestomarkupcontentlikeproductsorevents.2)TestmicrodatawithtoolslikeGoogle'sStructuredDataTestingTool.3)ConsiderusingJSON-LD

HTML5フォームの新しいものは何ですか？新しい入力タイプの調査May 13, 2025 pm 03:45 PM

HTML5INTRODUCESNEWINPUTTYPESTENHANCEUSEREXPERIENCE、SIMPRIYIFYDEVELOPMENT、およびIMPROVEACCESSIBILITY.1）自動的にEmailformat.2）FOTIMIZENUMIMERICYPAD.3）およびSimplifyDateAndtimeInputs、reducingEdeDateDateRutedolutution。

H5の理解：意味と重要性May 11, 2025 am 12:19 AM

H5はHTML5、HTMLの5番目のバージョンです。 HTML5は、Webページの表現力と相互作用を向上させ、セマンティックタグ、マルチメディアサポート、オフラインストレージ、キャンバス描画などの新しい機能を導入し、Webテクノロジーの開発を促進します。

H5：アクセシビリティとWeb標準のコンプライアンスMay 10, 2025 am 12:21 AM

ネットワーク標準へのアクセシビリティとコンプライアンスは、Webサイトにとって不可欠です。 1）アクセシビリティは、すべてのユーザーがウェブサイトに平等にアクセスできるようにします。2）ネットワーク標準は、ウェブサイトのアクセシビリティと一貫性を改善するために続きます。3）アクセシビリティには、セマンティックHTML、キーボードナビゲーション、色コントラスト、代替テキストの使用が必要です。

HTMLのH5タグは何ですか？May 09, 2025 am 12:11 AM

HTMLのH5タグは、小さいタイトルまたはサブタイトルのタグを付けるために使用される5番目のタイトルです。 1）H5タグは、コンテンツの階層を改良し、読みやすさとSEOを改善するのに役立ちます。 2）CSSと組み合わせて、スタイルをカスタマイズして視覚効果を強化できます。 3）H5タグを合理的に使用して、乱用を避け、論理コンテンツ構造を確保します。

H5コード：Web構造に関する初心者向けガイドMay 08, 2025 am 12:15 AM

HTML5にWebサイトを構築する方法には、次のものが含まれます。1。セマンティックタグを使用して、などのWebページ構造を定義します。 2。マルチメディアコンテンツ、使用、タグを埋め込みます。 3.フォーム検証やローカルストレージなどの高度な機能を適用します。これらの手順を通じて、明確な構造と豊富な機能を備えた最新のWebページを作成できます。

H5コード構造：読みやすさのためのコンテンツの整理May 07, 2025 am 12:06 AM

合理的なH5コード構造により、ページは多くのコンテンツの中で際立っています。 1）コンテンツなどのセマンティックラベルを使用して、構造を明確にするためにコンテンツを整理します。 2）FlexBoxやグリッドなどのCSSレイアウトを介して、さまざまなデバイスでのページのレンダリング効果を制御します。 3）レスポンシブデザインを実装して、ページがさまざまな画面サイズに適応するようにします。

See all articles