ぽちログ

プログラミング歴3年目元文系大学院生のぽちと申します。 とりあえずは自分用のメモなどを残して行くつもりですが、ご要望・意見・感想などを頂けたらそれによって内容も変化していくと思います。 よろしくお願いします。

【Canvas】PNG画像のRGB+Alphaを抽出する【JavaScript】

こんにちは。ぽちです。

今回は、研究開発の一貫でPNG画像の中身を覗く必要があったので、javascriptcanvasで覗くシステムを作ってみました。
まだ開発途中ですが、とりあえずキリが良いので。

PNG Color Picker

【今回やったこと】
① inputエレメントでpng画像をアップロード
pngを表示するimgエレメントを作る
canvas上に再描画し、pixelの配列を取得する
(③' Retinaディスプレイを使用しているとボケてしまったので、多少小細工※参考URL)
canvasのoffset座標に対応したpixelのR, G, B, Alpha値をconsoleに出力

f:id:twilightdve:20140815235108p:plain

ソースコードの説明は…時間がないので質問があれば答えます。
たぶんそんな難しくないです。

【参考URL】