投稿者 tel | 2013年5月27日

Canvasで透明なピクセルが黒になる

getImageDataで画像を取得してピクセルの色を調べても透明な色の場合元の色が取れない。(Google Chrome、Firefoxで確認)

// アルファを0にする
ctx.fillStyle = 'rgba(255, 0, 0, 0.0)';
ctx.fillRect(0, 0, 48, 48);
// ビットマップデータを取得
var image = ctx.getImageData(0, 0, 48, 48),
    data = image.data;
console.log(data[0], data[1], data[2], data[3]); // 0 0 0 0 になる

// アルファを1にする(0~255)
ctx.fillStyle = 'rgba(255, 0, 0, 0.005)';
ctx.fillRect(0, 0, 48, 48);
image = ctx.getImageData(0, 0, 48, 48);
data = image.data;
console.log(data[0], data[1], data[2], data[3]); // 255 0 0 1 になる

これはdrawImageなどで透明なpngファイルを指定した場合も同様の挙動になる。
fillStyleで色を指定した場合は元の色を覚えておけばいい話しなので特に困ることはないが、画像ファイルの場合に透明な赤も透明な青もすべて黒になってしまい元の色がわからなくなってしまう。

実際にブラウザで確認する用
http://jsdo.it/sapphire_al2o3/z4En


コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

カテゴリー

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