アニメーションGIF作成

関連サイト：

動作環境(2022-09-08時点)
・Google Chrome 105
・Microsoft Edge 105
・Mozilla Firefox 104
・Apple Safari 15.6

基本的な使い方：
画像を1番から順番に設定します。画像の持続時間を入力します。
[アニメーションGIF作成]ボタンをクリックします。

画像について：
画像はGIF,JPG,PNGを受け付けますが、GIFはそもそも256色しか扱えない為、256色以上含まれる画像の場合は少ない使用数の色は近似色に統合されます。よって、色数が比較的多い画像の場合は意図しない結果になる恐れが有りますので、最良の品質を得るためにはあらかじめGIFや8bitPNG画像の最適な画像をご用意ください。
画像の縦横サイズに制限はありませんが、大きな画像の場合は計算量が多い為、全ての結果を得るまでに数分かかる場合が有ります。最初は100ピクセル四方程度で、本サイトの動作をご確認いただき、徐々に目的の大きな画像をお試しください。おおむね500ピクセル四方以下をお勧めします。
大きな画像を指定して、処理がなかなか終わらない場合はブラウザが「応答の無いスクリプト」と言うメッセージを出す場合が有ります。これについては下部に記載しています。
透過させる場合で、画像1に透過色が含まれていない場合は意図しない結果になる場合が有ります。解決策が見当たらない場合は画像1に最低1ピクセルの透過色を含めてみてください。

持続時間について：
1単位は0.01秒です。よって、0.5秒は50、1秒は100で指定します。
この持続時間(ウエイトタイムとも言われます)の最小処理能力は処理系の性能に依存します。0.05秒で指定しても、実際には0.2秒程度になります。ブラウザの処理能力で異なってきますので、様々なブラウザで表示速度をお試しください。
最大値は65535です。約10分55秒となります。同じ画像をもっと長時間表示させたい場合は連続で同じ画像を指定すればいいでしょう。

透過時重ね方：
透過時に有効となります。
Aは、前の画像を消して、新しく画像を描画します。(前の画像を透過色で塗りつぶします。つまり透過になります)
Bは、前の画像を残したまま、その上に画像を重ねて描画します。
以下に例を示します。

使用する画像。 白を透過色に指定
Aの結果 Bの結果
用途によって使い分け頂けます。Bをうまく使うとファイルサイズを抑えることができます。

透過色指定：
透過は256色の内、GIFの仕様として1色が指定可能となっております。透過にしたい背景色が単色ではない場合は綺麗な切り抜きになりませんのでご注意ください。
RGB値16進数の場合は、0からFFとなります。FFは10進数の255を表します。0から255までの256種類です。Rはレッド、Gはグリーン、Bはブルーであり、256×256×256=16,777,216色の組み合わせが有りますが、この中の256個を保持できるようになっています。(インデックスカラー、GIFの仕様)
RGB値10進数の場合は、0から255となります。
R:0,G:0,B:0は黒を表し、R:FF,G:FF,B:FFは白を表します。R:FF,G:FF,B:0は黄色を表し、R:FF,G:0,B:FFは紫色を表します。(加色混合)
画像位置指定は、指定した画像の指定位置の色を透過色として使用します。

リピート回数：
一連のアニメーションの繰り返し数を指定します。
0は無制限に繰り返す事を意味します。1から最大65535の数値を指定する事ができ、その場合はその回数だけ繰り返し再生となります。(ブラウザによって挙動が異なります。下記も参照ください)

リピート回数1回などの場合：
リピート回数を1回や2回など少ない回数にする場合、ブラウザによって挙動(回数)が異なりますのでご注意ください。
回避法も記します。

本サイトでリピート回数1回で作成した場合：
Firefox --- 1回
Chrome --- 2回
IE11 --- 2回
Edge --- 2回
Opera --- 2回
Safari --- 2回
という結果となります。

本サイトではなく他のアプリでリピート回数1回で作成した場合：
Firefox --- 無限
Chrome --- 1回
IE11 --- 1回
Edge --- 1回
Opera --- 1回
Safari --- 1回
となりました。
ブラウザのバージョンによっても挙動が異なるようです。

つまりブラウザで挙動が異なりますのでリピート1回のアニメGIFはブラウザ判定でGIFファイルを切り替えるという事になりますがブラウザバージョンも考えるとちょっと無理があります。
そこで、以下の方法はいかがでしょうか
1枚目画像 --- 持続時間を1秒(=100)など希望の時間
2枚目画像 --- 持続時間を600秒(=60000)など長い時間にします。(最大65535)
これで2枚目の後に再び1枚目が表示されるのは約10分後になりますのでループ1回とほぼ同じ動作となります。
(リピート回数は1回(=1)にします)

ループ2回にしたい場合も同様です。
1枚目画像 --- 持続時間を1秒(=100)など希望の時間
2枚目画像 --- 持続時間を1秒(=100)など希望の時間
3枚目画像(1枚目画像と同じ) --- 持続時間を1秒(=100)など希望の時間
4枚目画像(2枚目画像と同じ) --- 持続時間を600秒(=60000)など長い時間にします。(最大65535)
(リピート回数は1回(=1)にします)

5枚の画像をリピート1回にする場合も同様です。
1枚目画像 --- 持続時間を1秒(=100)など希望の時間
2枚目画像 --- 持続時間を1秒(=100)など希望の時間
3枚目画像 --- 持続時間を1秒(=100)など希望の時間
4枚目画像 --- 持続時間を1秒(=100)など希望の時間
5枚目画像 --- 持続時間を600秒(=60000)など長い時間にします。(最大65535)
(リピート回数は1回(=1)にします)

この様に最後の画像だけ持続時間を最大値にすればいいでしょう。
最後の画像を10分(600秒)ではなくより長く表示させたい場合は、最後の画像を繰り返し指定します。

以上が小数回リピートさせるGIFアニメのクロスブラウザ対策となります。
(指定時間後にJavaScriptで静止画への差し替えでもいいでしょう)

横縦幅の指定：
縦横幅(縦幅は高さ)。
画像1の横縦幅を基準にその他の画像は同じサイズに伸縮されます。2番目以降に縦横比が異なる画像を指定した場合は2番目以降の画像はアスペクト比(縦横比)が歪められます。
任意サイズを指定した場合は、そのサイズに伸縮されます。

注意事項：
画像処理は全てJavaScriptで行っています。よって、処理速度はお使いのパソコン性能に左右されます。
処理時間が長いと、ブラウザはJavaScriptがフリーズした可能性があるとして、以下のメッセージを出す場合が有ります。
(Firefoxの場合)
(Chromeの場合)

この場合は「処理を続行」または「待機」で問題ありません。
なかなか処理が終わらずにこのメッセージが何度も出る場合は、「スクリプトを停止」または「ページを強制終了」させて、画像サイズを小さくして再度お試しください。
横縦幅の指定で、任意サイズで100×100程度からお試し頂き、徐々に横縦幅を大きくしていき動作をご確認ください。

動作確認ブラウザ：
以下のブラウザで動作確認をしています。また、処理速度に大きな差が有りますので参考にして下さい。
動作確認ブラウザと、一定画像を処理した時の掛った時間(2013年6月時点)
Firefox 21.0 --- 18秒
Chrome 27.0 --- 1秒 **最速**
Opera 12.15 --- 2秒
IE 8 --- 未対応
IE 9 --- 未対応
IE 10 --- 120秒
Safari(Windows) 5.1.7 --- 動作せず

2015年2月時点では、いずれのブラウザも高速に処理します。速度の大きな違いは見られませんでした。
(2013年6月のテスト内容とは異なります)
Firefox 36.0 -- 2秒程度
Chrome 40.0 -- 2秒程度
Opera 27.0 -- 2秒程度
IE 11 -- 2秒程度

作成した画像の確認：
画像はウェブブラウザにドラグアンドドロップすることで表示を確認できます。

2013年6月初版
2015年改訂
2024年6月改訂
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。