HTML5を使用して画像を読み込んだ画像をリアルタイムにモザイク化する処理を行う方法。

サンプル

コード説明

画像を読み込む方法に関しては前回の記事で説明したので割愛させて頂きます。

$('#mosaic').click(function(){
// 変数宣言
var image = document.getElementById('img');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// イメージのサイズをキャンバスに適用
canvas.width = image.width;
canvas.height = image.height;

// イメージをキャンバスに適用
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

// キャンバスのデータを取得
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
if (imgData !== "") {
    var mosaic_dot = parseInt(document.getElementById('num').value, 10);
    // 縦
	for (y = mosaic_dot; y < imgData.height; y+=mosaic_dot) {
        // 横
		for (x = mosaic_dot; x < imgData.width; x+=mosaic_dot) {
            // 1ピクセル = R + G + B + アルファ値(透過率) が格納されているので4ずつアップ
			var i = ((y * 4) * imgData.width) + (x * 4);
            for (m_y = (y-mosaic_dot); m_y < y; m_y++) {
                for (m_x = (x-mosaic_dot); m_x < x; m_x++) {
                    var m_i = ((m_y * 4) * imgData.width) + (m_x * 4);
                    imgData.data[m_i] = imgData.data[i];
                    imgData.data[m_i + 1] = imgData.data[i + 1];
                    imgData.data[m_i + 2] = imgData.data[i + 2];
                    imgData.data[m_i + 3] = imgData.data[i + 3];
                }
            }
		}
	}
    // 生成したモノクロ画像データを適用
    ctx.putImageData(imgData, 0, 0);
}
});

ロジック

ハイライトになっている17～34行目で主にモザイク処理を実行しています。
1.モザイクの粗さを取得。
2.粗さのpixel分の間隔を開けて色を取得する。
3.取得した位置の色を設定されたブロック分、2で設定を行った色を設定する。

これで簡単に画像のモザイク加工が出来るようになりました。


«前の記事：HTML5 FileAPIでイメージの読み込み2014年を振り返りつつ2015年の目標：次の記事»