HTML Canvasでアンシャープマスク

最近、HTML5Canvasの世界ではC言語で鳴らしたガチの画像処理の達人がコード書いてるらしく、恐ろしい最適化がされていてハッキリ言って付いていけませんw

ま、そんなガチムチマッチョな画像処理ウィザード野郎共はほっといて、HTML5Canvasで画像処理して遊ぶシリーズの五回目ぐらい。今日はアンシャープマスクのコードを書いてみました。

https://nullpon.moe/dev/sample/canvas/unsharp.html

名前に反してアンシャープマスクを適用すると、画像がシャープになります。これはボカした画像(アンシャープな画像)をマスクとして使用するという意味だそうです。ぼかした画像を重ねると色が変化している境界のピクセル値の差が大きくなってエッジが際立ちシャープに見える、というトリックらしいですよ。面白いですね〜

今回は手抜きしてボカした画像は予め用意したものを使っています。ボカし処理はピクセルの周囲の画素の平均値をとることで実現できます(ガウスぼかし)。周囲8ピクセルの平均ぐらいなら簡単ですが、平均を取る画素範囲の半径を広げたり、加重平均したりするとかなり面倒そうです。