HTML5 キャンバスは多くの画像の問題を処理できますが、HTML5 キャンバスを使用して画像モザイクを実現するにはどうすればよいでしょうか?この記事では、HTML5キャンバスに画像モザイクを実装する方法を紹介します。具体的な内容を一緒に見ていきましょう。
#最初にコードを与えてから分析します
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('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>ログイン後にコピー
説明:
body タグの on 関数は、ページ表示時に描画機能を実行します。
draw 関数は、メモリ内に HTML キャンバス オブジェクトを作成し、元の画像を読み取り、キャンバス上に描画します。レンダリングされたキャンバス オブジェクトの getImageData メソッドを呼び出して、ピクセル情報を取得します。
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';
}ログイン後にコピー
モザイク処理は、読み込んだ元画像の幅と高さ、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);
}
}
}ログイン後にコピー
実行結果:
モザイクの程度の変更
CreateMosaic(mem_context, mem_canvas.width, mem_canvas.height, 8);
ログイン後にコピー
CreateMosaicの第4パラメータの値 モザイクの深さを変更できます。
第 4 パラメータ値が 4 の場合の画像のモザイク効果
第 4 パラメータ値が 2 の場合の画像 モザイク効果＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃
以上がHTML5 キャンバスを使用して画像モザイクを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
