投稿者 tel | 2013年1月7日

HSVのカラーピッカー用の画像を作る

半透明のPNGファイルで背景色だけ変えてSとVを縦軸と横軸にとったカラーピッカーをHTMLで作る。これを実現するためには、アルファチャンネル付きのグレイスケールの画像をimgタグで指定して、background-colorに彩度、明度が最大の色を指定する。

hsv_colorpicker

上記のような場合、背景色に赤を設定して縦軸を彩度、横軸を明度にしている。

画像の作り方

まずHが0のとき(背景色がR255G0B0の赤)の画像を考える。横軸に明度、縦軸に彩度をとると画像上のある点での画素値はy = hsv(0, j, i)になる。このときの画素値が、最終的にアルファブレンドされた画素値と等しくなればいい。アルファブレンドされた時の画素値yは前景色をf(PNG画像のRGB成分になる)、背景色をb、アルファ値をαとして次のように表せる。

hsv_ablend

背景色が赤の時を仮定したのでr成分は255になる。

y_r

同じくb、g成分は0になる。

y_g

上記の式からアルファ値と前景を求める。アルファ値は

alpha

前景はアルファが0でないとき

front

になる。実際にコードにするとこんな感じ。canvasを使ってる。

var data = image.data;
for(var i = 0; i < image.height; i++) {
	for(var j = 0; j < image.width; j++) {
		var index = (i * image.width + j) * 4,
			c = hsv(0, (image.height - i - 1) / (image.height - 1), j / (image.width - 1)),
			a = 255 - c[0] + c[1] ^ 0,
			y = 0;
			if(a !== 0) {
				y = c[1] * 255.0 / a ^ 0;
			}
			data[index + 0] = y;
			data[index + 1] = y;
			data[index + 2] = y;
			data[index + 3] = a;
		}
	}
}

これで次のようなアルファ値をもったグレイスケール画像を作成できる。

color


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。