画像ファイルの一部をモザイクするのを作ってみた
画像ファイルの一部をモザイクするのを作ってみた。
自作の音楽作品のジャケットのタイトル部分をモザイクさせたく、
しかも二桁枚数の同じ場所を。
地味に面倒なので、Webアプリ作りの練習ネタに。
mozSiz : モザイクのサイズ, mozPos : モザイクの四角の左上のピクセルを json 形式で指定。ただし、やりたいことの都合、横方向 dx はセンターラインからの差分で指定。
画像ファイルを ↓ ドロップ ↓ したら、下に出てくるはず。
or Drop files here
モザイクは対象領域の画素値の平均値をとるのが普通そうな気がしましたが、演算が面倒なので、下記参考文献と同じく左上の画素値を採用しちゃいました。この辺、凝ろうとすればいくらでも沼れます。隣接が別の色になるように、とか。
<参考文献>
HTML Canvasを利用して 画像のモザイク処理をする (JavaScript プログラミング)
JavaScriptで画像をリサイズする方法（canvas）
JSON.parse()
