マルチメディアを学ぶ画像、ぼかし、Canvas、データ、配列、ピクセル、色、平均

ハンズオンJavaScript
楽天ブックス
Yahoo!
au PAY マーケット

開発環境

ハンズオンJavaScript (あんどうやすし(著)、オライリー・ジャパン)の15章(マルチメディアを学ぶ)、15.9(練習問題)の15-3の解答を求めてみる。

コード

let img_js = document.querySelector('#jslog'),
    canvas_js = document.querySelector('#jscanvas'),
    ctx = canvas_js.getContext('2d');

ctx.drawImage(img_js, 0, 0);

let image_data_before = ctx.getImageData(0, 0, 200, 200),
    image_data_after = ctx.getImageData(0, 0, 200, 200),
    data_before = image_data_before.data;

for (let y = 0; y < 200; y++) {
    if (y === 0 || y === 199) {
        continue;
    }
    for (let x = 0; x < 200; x++) {
        let base_y = 200 * y * 4,
            base_x = x * 4,
            base = base_y + base_x;
        image_data_after.data[base] =
            Math.floor(
                (data_before[base_y - 200 * 4] +
                    data_before[base - 4] +
                    data_before[base] +
                    data_before[base + 4] +
                    data_before[base_y + 200 * 4]) / 5
            );
        image_data_after.data[base + 1] =
            Math.floor(
                (data_before[base_y - 200 * 4 + 1] +
                    data_before[base - 4 + 1] +
                    data_before[base + 1] +
                    data_before[base + 4 + 1] +
                    data_before[base_y + 200 * 4 + 1]) / 5
            );
        image_data_after.data[base + 2] =
            Math.floor(
                (data_before[base_y - 200 * 4 + 2] +
                    data_before[base - 4 + 2] +
                    data_before[base + 2] +
                    data_before[base + 4 + 2] +
                    data_before[base_y + 200 * 4 + 2]) / 5
            );
    }
}

ctx.putImageData(image_data_after, 0, 0);

ぼかした画像。