js を使用して画像をモザイク化する方法の例

js を使用して画像をモザイク化する方法の例

この記事では、主に js を使用して画像をモザイク化する方法の例を紹介し、次のように共有します。

効果のデモンストレーション

ここに画像の説明を挿入

キャンバスの紹介

この HTML 要素は、クライアント側のベクター グラフィック用に設計されています。独自の動作はありませんが、クライアント側の JavaScript に描画 API を公開し、スクリプトがキャンバス上に必要なものを描画できるようにします。

HTML5タグは、画像を描画するために使用されます(スクリプト、通常はJavaScript経由)

ただし、要素自体には描画機能はありません (単なるグラフィックのコンテナーです)。実際の描画を行うにはスクリプトを使用する必要があります。

getContext() メソッドは、キャンバスに描画するためのメソッドとプロパティを提供するオブジェクトを返します。

このマニュアルでは、キャンバス上にテキスト、線、四角形、円などを描画するために使用できる getContext("2d") オブジェクトのプロパティとメソッドの完全なセットを提供します。

マークアップと SVG および VML の違い:

マークアップと SVG および VML との重要な違いは、JavaScript ベースの描画 API があるのに対し、SVG および VML は描画を記述するために XML ドキュメントを使用することです。

これら 2 つのアプローチは機能的に同等であり、どちらか一方を他方でシミュレートできます。表面的には非常に異なりますが、それぞれに長所と短所があります。たとえば、SVG 図面は、説明から要素を削除するだけで簡単に編集できます。

同じ図のマークアップから要素を削除するには、多くの場合、図面を消去して再描画する必要があります。

ここに画像の説明を挿入

ナレッジポイントの紹介

js を使用して画像を作成する

img = new Image() とします。
//画像にリンクを付けることができます img.src = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=826495019,1749283937&fm=26&gp=0.jpg'
//または既存のローカル画像のパス//img.src = './download.jpg'

//HTMLに追加 document.body.appendChild(img)

キャンバス.getContext("2d")

文法:
contextID パラメータは、キャンバス上で実行する描画の種類を指定します。現在、有効な値は「2d」のみで、これは 2 次元描画を指定し、このメソッドが 2 次元描画 API をエクスポートする環境オブジェクトを返すようにします。

ctx = Canvas.getContext(コンテキストID) とします。

ctx.drawImage()

JavaScript 構文 1:
キャンバス上に画像を配置します。

context.drawImage(画像,x,y);

JavaScript 構文 2:
キャンバス上に画像を配置し、幅と高さを指定します。

context.drawImage(画像、x、y、幅、高さ);

JavaScript 構文 3:
画像を切り抜き、切り抜いた部分をキャンバス上に配置します。

JavaScript 構文
getImageData() メソッドは、キャンバスの指定された四角形のピクセル データをコピーする ImageData オブジェクトを返します。
ImageData オブジェクトの各ピクセルには、RGBA 値という 4 つの情報があります。
R - 赤 (0-255)
G - 緑 (0-255)
B - 青 (0-255)
A - アルファ チャネル (0 ~ 255、0 は透明、255 は完全に表示されます)
色/アルファは配列形式で存在し、ImageDataオブジェクトのデータプロパティに格納されます。

var imgData = context.getImageData(x,y,幅,高さ);

ctx.putImageData()

putImageData() メソッドは、画像データ (指定された ImageData オブジェクトから) をキャンバスに戻します。

次に、この小さな機能を完了するために、ステップバイステップで説明してください〜

ここに画像の説明を挿入

ステップバイステップ

イメージを準備し、メソッドを追加します

<本文>
    <img src="./download.jpg">
    <button onclick="addCanvas()">キャンバスを生成</button>
    <button onclick="generateImg()">画像を生成</button>
</本文>

ここに画像の説明を挿入

次にaddCanvasメソッドを記述します

関数addCanvas() {
		bt = document.querySelector('button') とします。

        let img = new Image(); //1. 画像をコピーする準備をする img.src = './download.jpg'; 
        img.onload = function() { //2. 画像が読み込まれるのを待ちます。let width = this.width
            高さを this.height とします
			
			let canvas = document.createElement('canvas') //3. キャンバスを作成します。let ctx = canvas.getContext("2d"); //4. キャンバスのコンテンツを取得します。canvas.setAttribute('width', width) //5. 統一性を保つために、キャンバスの幅と高さを画像の幅と高さに設定します。canvas.setAttribute('height', height)
   
            ctx.drawImage(this, 0, 0, width, height); //5. キャンバスに画像を描画します document.body.insertBefore(canvas, bt) //5. ボタンの前にキャンバスを挿入します}
    }

キャンバスに画像を正常に取得しました:

ここに画像の説明を挿入

さて、成功に向けて小さな一歩を踏み出しましたが、次は何をすべきでしょうか? …さて、マウスを押すプロセスを表すにはネイティブのonmouseupイベントとonmousedownイベントを使用する必要がありますが、これらの 2 つのイベントはどこに追加すればよいでしょうか?

そうです、キャンバス上でモザイク操作を実行したいので、これらの2つのイベントをキャンバス要素に追加する必要があります。

キャンバスを作成するプロセスが少し複雑であることを考慮して、モジュールのカプセル化を作成しましょう。

関数addCanvas() {
        bt = document.querySelector('button') とします。

        img = new Image();
        img.src = './download.jpg'; //ここに自分の写真を入れてください img.onload = function() {
            幅 = this.width とします
            高さを this.height とします

            させて {
                キャンバス、
                ctx
            } = createCanvasAndCtx(width, height) //オブジェクトの分解はキャンバスとctxを受け取ります

            ctx.drawImage(this, 0, 0, 幅, 高さ);

            document.body.insertBefore(キャンバス、bt)

        }
    }

    関数createCanvasAndCtx(幅, 高さ) {
        キャンバスを document.createElement('キャンバス') にします。
        キャンバス.setAttribute('幅', 幅)
        キャンバス.setAttribute('height', 高さ)
        canvas.setAttribute('onmouseout', 'end()') //マウスがキャンバスから離れないように修正 canvas.setAttribute('onmousedown', 'start()') //マウスダウンを追加 canvas.setAttribute('onmouseup', 'end()') //マウスアップを追加 let ctx = canvas.getContext("2d");
        戻る {
            キャンバス、
            ctx
        }
    }

	関数開始() {
            キャンバスを document.querySelector('キャンバス') にします。
            キャンバス.onmousemove = () => {
                console.log('マウスを押して動かしました')
            }
        }

        関数終了() {
            キャンバスを document.querySelector('キャンバス') にします。
            キャンバス.onmousemove = null
        }

start()end()が有効かどうかをテストする

ここに画像の説明を挿入

さて、この時点では、コードはまだ期待どおりに動作しています。

次の課題はより困難です。ピクセルを取得して処理する必要があります。start() 関数をもう一度書き直してみましょう。

関数開始() {
    img = document.querySelector('img') とします。
    キャンバスを document.querySelector('キャンバス') にします。
    ctx = canvas.getContext("2d"); とします。
    imgData = ctx.getImageData(0, 0, img.clientWidth, img.clientHeight);
    キャンバス.onmousemove = (e) => {
        let w = imgData.width; //1. 画像の幅と高さを取得します。let h = imgData.height;

        //モザイクの度合い。数字が大きいほどぼやけます。let num = 10;

        //マウスが現在位置するピクセルのRGBAを取得します
        color = getXY(imgData, e.offsetX, e.offsetY);

        (k = 0; k < num; k++) の場合 {
            (l = 0; l < num; l++) の場合 {
                //座標 (e.offsetX + l, e.offsetY + k) で imgData の色を設定します。setXY(imgData, e.offsetX + l, e.offsetY + k, color);
            }
        }
        //キャンバスデータを更新 ctx.putImageData(imgData, 0, 0);
    }
}

//ここにはsetXYとgetXYという2つの関数があります。興味があれば、取得の原理を学ぶことができます。function setXY(obj, x, y, color) {
    var w = obj.width;
    var h = obj.height;
    var d = obj.data;
    obj.data[4 * (y * w + x)] = color[0];
    obj.data[4 * (y * w + x) + 1] = color[1];
    obj.data[4 * (y * w + x) + 2] = color[2];
    obj.data[4 * (y * w + x) + 3] = color[3];
}

関数 getXY(obj, x, y) {
    var w = obj.width;
    var h = obj.height;
    var d = obj.data;
    var color = [];
    色[0] = obj.data[4 * (y * w + x)];
    色[1] = obj.data[4 * (y * w + x) + 1];
    色[2] = obj.data[4 * (y * w + x) + 2];
    色[3] = obj.data[4 * (y * w + x) + 3];
    色を返します。
}

さて、成功はそう遠くありません。最後のステップは画像を生成することです。

幸いなことに、canavs はキャンバスを Base64 でエンコードされた画像として直接エクスポートする直接的な方法を提供します。

関数generateImg() {
    キャンバスを document.querySelector('キャンバス') にします。
    var newImg = 新しい画像();
    newImg.src = canvas.toDataURL("image/png");
    document.body.insertBefore(新しい画像、キャンバス)
}

最終結果:

ここに画像の説明を挿入

とても簡単でしょう? 手書きのコードが次のコードと同じかどうか確認してみましょう。

完全なコード

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>

<本文>

    <本文>
        <img src="./download.jpg">
        <button onclick="addCanvas()">キャンバスを生成</button>
        <button onclick="generateImg()">画像を生成</button>
    </本文>
    <スクリプト>
        関数addCanvas() {
            bt = document.querySelector('button') とします。

            img = new Image();
            img.src = './download.jpg'; //ここに自分の写真を入れてください img.onload = function() {
                幅 = this.width とします
                高さを this.height とします

                させて {
                    キャンバス、
                    ctx
                } = createCanvasAndCtx(幅, 高さ)

                ctx.drawImage(this, 0, 0, 幅, 高さ);

                document.body.insertBefore(キャンバス、bt)

            }
        }

        関数createCanvasAndCtx(幅, 高さ) {
            キャンバスを document.createElement('キャンバス') にします。
            キャンバス.setAttribute('幅', 幅)
            キャンバス.setAttribute('height', 高さ)
            キャンバス.setAttribute('onmouseout', 'end()')
            キャンバス.setAttribute('onmousedown', 'start()')
            キャンバス.setAttribute('onmouseup', 'end()')
            ctx = canvas.getContext("2d"); とします。
            戻る {
                キャンバス、
                ctx
            }
        }

        関数開始() {
            img = document.querySelector('img') とします。
            キャンバスを document.querySelector('キャンバス') にします。
            ctx = canvas.getContext("2d"); とします。
            imgData = ctx.getImageData(0, 0, img.clientWidth, img.clientHeight);
            キャンバス.onmousemove = (e) => {
                let w = imgData.width; //1. 画像の幅と高さを取得します。let h = imgData.height;

                //モザイクの度合い。数字が大きいほどぼやけます。let num = 10;

                //マウスが現在位置するピクセルのRGBAを取得します
                color = getXY(imgData, e.offsetX, e.offsetY);

                (k = 0; k < num; k++) の場合 {
                    (l = 0; l < num; l++ とします) {
                        //座標 (e.offsetX + l, e.offsetY + k) で imgData の色を設定します。setXY(imgData, e.offsetX + l, e.offsetY + k, color);
                    }
                }
                //キャンバスデータを更新 ctx.putImageData(imgData, 0, 0);
            }
        }

        関数generateImg() {
            キャンバスを document.querySelector('キャンバス') にします。
            var newImg = 新しい画像();
            newImg.src = canvas.toDataURL("image/png");
            document.body.insertBefore(新しい画像、キャンバス)
        }

        関数setXY(obj, x, y, color) {
            var w = obj.width;
            var h = obj.height;
            var d = obj.data;
            obj.data[4 * (y * w + x)] = color[0];
            obj.data[4 * (y * w + x) + 1] = color[1];
            obj.data[4 * (y * w + x) + 2] = color[2];
            obj.data[4 * (y * w + x) + 3] = color[3];
        }

        関数 getXY(obj, x, y) {
            var w = obj.width;
            var h = obj.height;
            var d = obj.data;
            var color = [];
            色[0] = obj.data[4 * (y * w + x)];
            色[1] = obj.data[4 * (y * w + x) + 1];
            色[2] = obj.data[4 * (y * w + x) + 2];
            色[3] = obj.data[4 * (y * w + x) + 3];
            色を返します。
        }

        関数終了() {
            キャンバスを document.querySelector('キャンバス') にします。
            キャンバス.onmousemove = null
        }
    </スクリプト>
</本文>

</html>

もちろん、もっといろいろな創作ができます。例えば、上のモザイクは正方形ですが、数学の知識を使って円形にして、円の中心をマウスの中心にして広げることもできます。

いくつかのプロセスを改善することもできます。たとえば、モザイクの位置が間違っている場合は、キャンバスをクリアしてやり直すことができます。
または、画像をエクスポートした後に後処理を行ってキャンバスを非表示にする

js を使って画像をモザイクする例についての記事はこれで終わりです。より関連性の高い js 画像モザイクコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 画像をモザイク化する Three.js サンプル コード
  • JavaScriptを使用して画像モザイクを表示し、テキスト機能を追加する
  • モザイク後の画像を表示および切り替えるにはJavaScriptを使用します

<<:  Docker を使用して Spring Boot をデプロイする方法

>>:  MySQL 8.0.11 の詳細なインストール手順

推薦する

DIV と画像の水平および垂直の中央揃えは複数のブラウザと互換性があります

最初のタイプ: 完全な CSS コントロール、レイヤーフローティング (ログインページに適しています...

Centos 7.4 サーバーの時刻同期設定方法 [NTP サービスに基づく]

この記事では、CentOS 7.4 サーバーで時刻同期を構成する方法について説明します。ご参考までに...

VMware 15 仮想マシンに Ubuntu 18.04 をインストールするグラフィック チュートリアル

ここ数年、私は自動化とコンピューターを行ったり来たりしてきました。最近は、機械学習に関連するプロジェ...

既存のDockerコンテナの内容を変更する方法

1. Docker psはコンテナをリストします 2. Docker cpはコンテナにファイルをコピ...

Nginx proxy_pass の / スラッシュによって引き起こされた殺人事件の詳細な説明

背景nginx サーバー モジュールは 2 つのサーバーにプロキシする必要があるため、異なるサーバー...

MySQL 8.0 バージョンで getTables がすべてのデータベース テーブルを返す問題の簡単な分析

序文この記事では、主にライブラリ内のすべてのテーブルを返すMysql8.0ドライバgetTables...

データベースのインデックス作成に関する知識ポイントのまとめ。必要な情報はすべてここにあります。

データベースインデックスについては皆さんもよくご存知だと思います。 インデックスは、データベース テ...

CSS3 で transform を使用した場合のフォントぼかしの解決方法の詳細な説明

この質問は非常に奇妙なので、あまり多くを語らずにコードに直接進みます。 .g-ダイアログラッパー{ ...

MySQLでルートユーザーのパスワードを変更する方法

方法1: SET PASSWORDコマンドを使用する mysql> username@loca...

Ubuntu 20.04 Firefox でビデオを再生できない (Flash プラグインがない) 場合の解決策

1. Flashプラグインパッケージのダウンロードアドレス: https://get.adobe.c...

Windows10にmysql5.7.18をインストールするチュートリアル

このチュートリアルでは、MySQL 5.7.18のインストールと設定方法を参考までに紹介します。具体...

Nginx 転送ソケットポート設定の詳細な説明

Nginx によるソケット ポート転送の一般的なシナリオ: オンライン学習アプリケーションでは、通常...

MySQL フェイルオーバー ノート: アプリケーション対応設計の詳細な説明

1. はじめに周知のように、データベース ミドルウェアの読み取り/書き込み分離のアプリケーション シ...

LinuxのCentos7でmysql5.7.29を構築する詳細なプロセス

1. MySQLをダウンロードする1.1 ダウンロードアドレスhttps://downloads.m...

MYSQL スロークエリとログの例の説明

1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...