フルカラー GIF 作成（Canvas 版） JavaScript の説明

フルカラー GIF 作成（Canvas 版） JavaScript の説明

［ご注意］
このプログラムは，あるバージョンの Mozilla では，Mozilla の不具合のため正しく動作しません．それについては後の方にある説明をご覧ください．

このプログラムは，「フルカラー GIF 作成」おもちゃの処理の一部を，Canvas エレメントを利用して行うように変更して，処理を簡単化したものです．フルカラー GIF（と私が勝手に呼んでいるもの）自体の説明は，「フルカラー GIF 作成」の方の説明をご覧ください．
元の「フルカラー GIF 作成」では，入力の PNG ファイルから画像データを取り出す処理を自前のコードで行っていますが，Canvas エレメントを使うと画像データの取り出しを簡単に行えます．
説明の便宜上，ここでは元の「フルカラー GIF 作成」の方を自前版と呼びます．

Canvas を使った画像データの取り出しは，次のような手順になります．

Image オブジェクトに入力の画像ファイルを割り付ける．

↓

drawImage メソッドで，Image オブジェクトの画像を Canvas に描画する．

↓

getImageData メソッドで，Canvas の画像データを取り出す．

Canvas に描画を行わせるので，入力ファイルの形式は PNG に限らず，drawImage で扱える形式なら何でも使用することができます．
一方，処理はブラウザ任せなので，読み込みの過程で細かい操作はできません．たとえば，自前版では入力ファイルの色の形式がグレースケールやパレットインデックスの場合はエラーにしていますが，Canvas 版ではそのようなチェックはできません．それが意味のある変換であるかどうかに拘らず，drawImage で扱えるファイルはすべて（GIF でさえ）変換されます．
また，一旦 Canvas に描画して，その結果の画像を取り出すという方法であることから，ブラウザの実装次第では，もしかすると変換後の画像が入力と全く同じ画像にはならない場合もあるかも知れません．

自前版と Canvas 版では，アルファチャネルによる透過についての処理が異なります．
自前版では，アルファチャネル付きの PNG を入力として使った場合，アルファチャネルを無視します．したがって，アルファ値が全透過（透過率 100%）であるピクセルも非透過として扱われます．
一方 Canvas 版では，アルファ値が全透過の場合の透過と 'tRNS' チャンクの透過を区別できません．Canvas から取り出した画像データに全透過のピクセルがあったとき，描画された結果からだけでは，そのどちらであったかは判りません．そのため Canvas 版では，全透過のピクセルは GIF の透過に変換しています．結果として，アルファチャネルによる全透過も GIF の透過に変換されます．
まとめると次のようになります．

自前版 Canvas 版

'tRNS' チャンクの透過透過になる．透過になる．

アルファチャネルの全透過非透過になる．透過になる．

アルファチャネルの半透過非透過になる．非透過になる．ブラウザによっては
色が変わってしまう．（下記）

Canvas 版のアルファチャネルの半透過の場合の変換が，妙な結果になります．
GIF 作成の際，アルファ値が全透過以外のピクセルについてはアルファ値を無視し，色の情報だけを使っています．入力ファイルの画像データがそのまま Canvas にコピーされるのであれば，元の色がそのまま GIF の色になるはずです．
ところが，実際には Netscape 9，Firefox 2，Firefox 3 の何れでも，元の色とは異なる色になってしまいます．（このプログラムそのままではなく，テスト用のプログラムでの結果です．後述のように，このプログラムは Firefox 3 では動きません．）元の色にアルファ値を掛けた色とも違います．どうも元の色にアルファ値を 2 回掛けた色になっているようです．なぜそのようになるのか理由が判りません．
しかし，Firefox 3.1 Beta 3 で試してみたらちゃんと元の色のままになったので，単に旧バージョンのバグのような気がします．
何れにしろ，半透過は GIF では使えないので，どのような結果になってもこのプログラムの目的には関係ないでしょう．

使用可能なブラウザのバージョンについて

このプログラムは Netscape 9，Firefox 2 では正常に動きますが，Firefox 3 では動きません．
Firefox 3 の場合は入力ファイルの内容を "data" URL としてエンコードしたものを Canvas に drawImage しますが，Mozilla の不具合のため Firefox 3 では，"data" URL で表された画像から描画した Canvas から画像データを取り出そうとすると，例外が発生します．
これを書いている時点での Firefox リリース版の最新は 3.0.8 ですが，そのバージョンではまだこの不具合は修正されていません．しかし，開発チームの方ではすでに対応が完了しているようなので，Firefox 3.5 では修正されるはずです．（Firefox 3.1 Beta 3 では動くことを確認済みです．）
したがって，Firefox の場合は Firefox 2 または Firefox 3.5 以降をお使いください．
他の Gecko エンジン使用ブラウザでも恐らく，Firefox 3 に相当するバージョンのものでは動かないだろうと思いますので，他のバージョンをお使いください．

Image オブジェクトに入力の画像ファイルを割り付ける．
	↓
drawImage メソッドで，Image オブジェクトの画像を Canvas に描画する．
	↓
getImageData メソッドで，Canvas の画像データを取り出す．

	自前版	Canvas 版
'tRNS' チャンクの透過	透過になる．	透過になる．
アルファチャネルの全透過	非透過になる．	透過になる．
アルファチャネルの半透過	非透過になる．	非透過になる．ブラウザによっては色が変わってしまう．（下記）