Panda Noir

JavaScript の限界を究めるブログです。

canvasで画像をピクセル単位で編集しよう

いままでJavascriptでできるとは知りませんでした…すごい

どんなことができるの?

ピクセル単位でRGBAを取得、設定出来ます。これを使えば赤いところは透過するなどといったことができます。

やり方

まずはcanvasを取得、getContext("2d")をするところまではいつもどおりのcanvasです。そしたらgetImageDataメソッドを使います。引数には右上のx座標、y座標、左下のx座標、y座標を渡します。

あとは返ってきたデータをほふるだけです。

注意

返ってくるのはRGBAを合わせた一次配列です。つまり[R,G,B,A,R,G,B,A]という順に並んでいるので、forで回すときに工夫が必要です。といってもfor(var i=0;i<data.length;i+=4)とi++のところを4にするだけですが。

終わりに

これは色々とできることが広がりそうです。知らなかったことを後悔してます。