【Canvas】PNG画像のRGB+Alphaを抽出する【JavaScript】
こんにちは。ぽちです。
今回は、研究開発の一貫でPNG画像の中身を覗く必要があったので、javascriptとcanvasで覗くシステムを作ってみました。
まだ開発途中ですが、とりあえずキリが良いので。
【今回やったこと】
① inputエレメントでpng画像をアップロード
② pngを表示するimgエレメントを作る
③ canvas上に再描画し、pixelの配列を取得する
(③' Retinaディスプレイを使用しているとボケてしまったので、多少小細工※参考URL)
④canvasのoffset座標に対応したpixelのR, G, B, Alpha値をconsoleに出力
ソースコードの説明は…時間がないので質問があれば答えます。
たぶんそんな難しくないです。
【参考URL】