ＮＳＱ システム開発部 Blog

はじめまして。
ネットスクエアの永田です。

先日、先輩から画像のモザイク処理の仕組みが、

『指定した範囲(5×5ピクセル等)の色の平均値をとって、その範囲を平均値で塗りつぶす』

という処理であることを教えてもらう機会がありました。

今回は、そのモザイク処理をHTML5のcanvasを使って実証してみました。

→ 動作デモへ
※Internet Explorerでは動作しないので、FireFox、Chrome、Operaなどのブラウザで確認してみて下さい。

RGB値のR/G/Bそれぞれの平均値をとった色で塗りつぶすことでモザイク処理が実現できました。

従来、Flashなどを使わないと難しかった表現が、canvas+javascriptで出来るのは面白いですね。