JavaScriptで画像処理 - モザイク処理

#イメージ
左がモザイク前、右がモザイク後です。

#サンプル
画像ファイル選択後に、mosaicボタンを押してください。

See the Pen mosaic by Shinichiro Maki (@olj611) on CodePen.

#モザイク処理のロジック  上図は幅9、高さ5の画像の画像をモザイク幅2,モザイク高さ2で処理する時のイメージ図です。 モザイク矩形のピクセルの平均色で塗りつぶすだけです。 #ImageDataオブジェクト サンプルプログラムではImageDataオブジェクトを使用しています。 画像処理ではバッファを直接いじることになるので、ImageDataの利用は必須です。 ご存知でない方はこちらを参照してください。