HTML5+JavaScriptで画像処理 ハーフトーニング

JavaScript HTML5

HTML5とJavaScriptでハーフトーニングをしてみました．

実行ページ
http://jstap.web.fc2.com/test/html5/halftoning/halftoning.html
※ 濃度パターン法は低速なので注意してください．

ソース
http://github.com/kojo-sugita/Halftoning

ハーフトーニングとは多値階調を持つ画像を2値（あるいは少ない階調）で表現する方法のことである．
マンガのスクリーントーンやモノクロプリンタで出力された画像などがまさにソレで点の密疎で濃淡を表現する．
今回実装した手法は以下の3通り．いずれも基本的な手法である．


濃度パターン法 (density pattern method)
画像の1画素に対して複数画素からなる2値表現のパターンを割り当てて濃淡を表現する手法．
例えば1画素を4×4のパターンを割り当てると擬似的に17階調の表現ができる(下記図参照)．

割り当てる濃度パターンを4×4，現画像をN×M画素とすると出力画像は4N×4M画素になる．

実行結果

※ 前述のとおり画像サイズが大きくなるため一部抜粋


ディザ法 (tither method)
ディザパターンと呼ばれるN×Nの行列を用意しておく．
ディザパターンの値と現画像の各画素の輝度値を比較し，その大小関係でその画素を白にするか黒にするかを決定する．

1. 画像をN×N画素(ディザパターンのサイズ)のブロックに分割する
2. ブロック内の各画素がディザパターン内の対応画素値×16 + 8以上なら白，未満なら黒を割り当てる

実行結果


誤差拡散法 (error diffusion method)
ある画素の輝度値と，その画素を2値化した値との誤差を周辺画素に分散させ，誤差をキャンセルするように未処理画素の輝度値を修正しながら2値化していく手法．

fを対象画素の輝度値，gを出力画素の輝度値とする．

1. 誤差eを以下のように決定する．
　f > 128 のとき・・・g = 255
　f <= 128 のとき・・・g = 0
　e = f - g

2. 誤差eを周辺画素に分散させる．
　f'(x + 1, y) = f(x + 1, y) + (5/16)e
　f'(x - 1, y + 1) = (x - 1, y + 1) + (3/16)e
　f'(x, y + 1) = f(x, y + 1) + (5/16)e
　f'(x + 1, y + 1) = f(x + 1, y + 1) + (3/16)e

実行結果

誤差拡散法が一番それっぽい結果になっていることが分かる．