コードコピーは次のとおりです。
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<style>
ボディ{パディング左：75px;バックグラウンドカラー：ベージュ}
</style>
<スクリプト>
///////////////////////////////////////////////// //////////////
// base64エンコードされたGIF画像デコード
// mozart0による
// 2005/10/29
//////////////////////////////////
// GIFクラスのオブジェクトを作成します
//クラスGIFは、この関数で内部的に定義されています
// STR64：base64エンコードされたGIFファイルの文字列
//作成されたGIFオブジェクトを正常に返しました
//失敗した場合はnullを返します
関数getGif（str64）{
var bytes = decodebase64（str64）;
if（！bytes）{
alert（ "エラー：base64エンコード"）;
nullを返します。
}
var gif = new gif（）;
for（var i = 0; i <6; i ++）
gif.version+= string.fromcharcode（bytes [i]）;
if（gif.version.slice（0,3）！= "gif"）{
Alert（ "エラー：非GIF画像形式"）;
nullを返します。
}
gif.width = bytes [i] |（bytes [i+1] << 8）;
gif.height = bytes [i+2] |（bytes [i+3] << 8）;
var f = bytes [i+4];
gif.colorresolution =（f >> 4＆0x7）+1;
gif.sorted =（f＆0x8）？true：false;
gif.backgroundindex = bytes [i+5];
gif.pixelaspectradio = bytes [i+6];
if（f＆0x80）{
gif.globalpalette = [];
i+= getPalette（i+7、bytes、gif.globalpalette、2 <<（f＆0x7））;
}
i+= 7;
for（var j = i; j <bytes.length; j ++）
if（bytes [j] == 0x21 && bytes [j+1] == 0xf9）
壊す;
if（j == bytes.length）{
for（; i <bytes.length; i ++）
if（bytes [i] == 0x2c）
壊す;
if（i == bytes.length）{
alert（ "エラー：画像データが見つかりません"）;
nullを返します。
}
var f = new gif_frame（）;
if（！getSingleframe（i、f））
nullを返します。
それ以外
gif.frames.push（f）;
}
それ以外{
i = j;
する{
var f = new gif_frame（）;
var t = getSingleframe（i、f）;
if（！t）
nullを返します。
gif.frames.push（f）;
for（i+= t; i <bytes.length; i ++）
if（bytes [i] == 0x21 && bytes [i+1] == 0xf9）
壊す;
}
while（i <bytes.length）;
}
gifを返します。
//内部プロセス、カラーテーブルを生成します
関数getPalette（pos、s、d、len）{
len*= 3;
for（var i = pos; i <pos+len; i+= 3）
d.push（ '＃'+（s [i] <= 0xf？ "0"： ""）+s [i] .toString（16）
+（s [i+1] <= 0xf？ "0"： ""）+s [i+1] .toString（16）
+（s [i+2] <= 0xf？ "0"： ""）+s [i+2] .toString（16））;
レンを返します。
}
//内部プロセス、データセグメントの統合
関数GetBlock（POS、S、D）{
var p = pos;
while（len = s [p ++]）{
for（var i = 0; i <len; i ++）
d.push（s [p+i]）;
p+= len;
}
p-posを返します。
}
//内部プロセス、データのフレームを取得します
function getSingleframe（pos、frame）{
var i = pos;
if（bytes [i] == 0x21）{
i+= 3;
if（bytes [i]＆1）
frame.transparentindex = bytes [i+3];
frame.delay = bytes [i+1] |（bytes [i+2] << 8）;
for（i+= 5; i <bytes.length && bytes [i]！= 0x2c; i ++）;
if（i == bytes.length）{
alert（ "エラー：画像識別子が見つかりません"）;
0を返します。
}
}
frame.offsetx = bytes [i+1] |（bytes [i+2] << 8）;
frame.offsety = bytes [i+3] |（bytes [i+4] << 8）;
frame.width = bytes [i+5] |（bytes [i+6] << 8）;
frame.height = bytes [i+7] |（bytes [i+8] << 8）;
var f = bytes [i+9];
I+= 10;
if（f＆0x40）
frame.interlace = true;
if（f＆0x20）
frame.sorted = true;
if（f＆0x80）{
frame.colorresolution =（f＆0x7）+1;
frame.localpalette = [];
i+= getPalette（i、bytes、frame.localpalette、1 << frame.colorresolution）;
}
それ以外{
frame.colorresolution = gif.colorresolution;
frame.localpalette = gif.globalpalette;
}
var lzwlen = bytes [i ++]+1;
i+= getBlock（i、bytes、frame.data）;
frame.data = decodelzw（frame.data、lzwlen）;
return frame.data?i-pos:0;
}
// GIFファイルを保存するためのデータ構造を定義します
// Method showinfoを提供し、写真情報を返します
関数gif（）{
this.version = ""; //バージョン番号
this.width = 0;
this.height = 0;
this.colorresolution = 0;
this.sorted = false; //グローバルカラーテーブル分類フラグ
this.globalpalette = null;
this.backgroundIndex = -1;
this.pixelaspectradio = 0;
this.frames = [];
this.showinfo = function（sep）{//画像情報を表示する、SEPはラインセパレーターです
if（！sep）
sep = "/n";
var s = "gif情報："+sep+"----------------------------------------------------------------- -------------------------------------------------------------- -----------------------------
s+= subinfo（this）+sep;
for（var i = 0; i <this.frames.length; i ++）
S+= sep+"フレーム"+i+"------------------------------------------------------------------------------------ -------------------------------------------------------------- -------------------------
s;
関数subinfo（o）{
var s = "";
for（var i in o）{
if（i == "showinfo" || i == "draw"）
続く;
s+= sep+i+"：";
if（typeof（o [i]）== "object"）
s+=（o [i]？o [i] .length： "null"）;
それ以外
s+= o [i];
}
s;
}
}
}
//画像のフレームを保存するデータ構造を定義します
//メソッドの描画、描画を提供します
関数gif_frame（）{
this.offsetx = 0; // x方向オフセット
this.offsety = 0; // y方向オフセット
this.width = 0;
this.height = 0;
this.localpalette = null;
this.colorresolution = 0;
this.interlace = false; //インターリーブフラグ
this.sorted = false; //ローカルカラーテーブル分類ロゴ
this.data = [];画像データ、各ピクセル色の整数インデックスを保存します
this.transparentIndex = -1; // transParentindex
this.delay = 0;
this.draw = function（parent、zoom）{
if（！this.data.length）
戻る;
if（！parent）
親= document.body;
if（！Zoom）
Zoom = 1;
if（parent.clientWidth <this.width*Zoom）
parent.style.width = this.width*Zoom;
if（parent.clientheight <this.height*Zoom）
parent.style.height = this.height*Zoom;
var id = "imgdefaultdraw";
var img = document.getElementById（id）;
if（img）
delete parent.RemoveChild（IMG）;
img = document.createelement（ "div"）;
img.id = id;
parent.AppendChild（IMG）;
img.style.position = "absolute";
var t = document.createelement（ "div"）;
t.style.overflow = "hidden";
T.Style.Position = "Absolute";
deflayout（this.data、this.localpalette、this.width、this.height、img、t、zoom）;
tを削除します。
}
}
}
// base64デコード
// strin、文字列を入力します
//配列の返品が成功したため、各要素には1バイトの情報が含まれています
//失敗した場合はnullを返します
関数decodeBase64（strin）{
if（！strin.length || strin.length％4）
nullを返します。
var str64 =
"abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789+/=";
var index64 = [];
for（var i = 0; i <str64.length; i ++）
index64 [str64.charat（i）] = i;
Var C0、C1、C2、C3、B0、B1、B2;
var len = strin.length;
var len1 = len;
if（strin.charat（len-1）== '='）
len1- = 4;
var result = [];
for（var i = 0、j = 0; i <len1; i+= 4）{
c0 = index64 [strin.charat（i）];
c1 = index64 [strin.charat（i+1）];
c2 = index64 [strin.charat（i+2）];
c3 = index64 [strin.charat（i+3）];
b0 =（c0 << 2）|（c1 >> 4）;
b1 =（c1 << 4）|（c2 >> 2）;
B2 =（C2 << 6）| C3;
result.push（b0＆0xff）;
result.push（b1＆0xff）;
result.push（b2＆0xff）;
}
if（len1！= len）{
c0 = index64 [strin.charat（i）];
c1 = index64 [strin.charat（i+1）];
c2 = strin.charat（i+2）;
b0 =（c0 << 2）|（c1 >> 4）;
result.push（b0＆0xff）;
if（c2！= '='）{
c2 = index64 [c2];
b1 =（c1 << 4）|（c2 >> 2）;
result.push（b1＆0xff）;
}
}
返品結果;
}
// GIFのLZWデコード関数
// arrbytesはソースデータ、nbitsはコード化されたビットの初期数です
//配列を正常に返しました、各要素にはカラーインデックスが含まれています
//失敗した場合はnullを返します
関数decodelzw（arrbytes、nbits）{
var cc = 1 <<（nbits-1）;
var eoi = cc+1;
var table = []、mask = []、result = [];
for（var i = 0; i <cc; i ++）
表[i] =（i >> 8＆0xf）.toString（16）
+（i >> 4＆0xf）.toString（16）+（i＆0xf）.toString（16）;
for（i = 2、mask [1] = 1; i <13; i ++）
mask [i] = mask [i-1] << 1 | 1;
var bc = nbits;
var pos = 0、temp = 0、tleft = 0、code = 0、old = 0;
while（true）{
while（tleft <bc）{
temp = temp |（arrbytes [pos ++] << tleft）;
tleft+= 8;
}
code = temp＆mask [bc];
tleft- = bc;
temp >> = bc;
if（code == eoi）
壊す;
if（code == cc）{
Table.length = cc+2;
bc = nbits;
old = code;
続く;
}
var t = "";
if（code <table.length）{
t = table [code];
if（old！= cc）
Table.Push（Table [old]+T.Slice（0,3））;
}
else if（old <table.length）{
t = table [old]+table [old] .slice（0,3）;
table.push（t）;
}
それ以外{
alert（ "エラー：無効な画像データ"）;
nullを返します。
}
old = code;
for（var i = 0; i <t.length; i+= 3）
result.push（parseint（t.substr（i、3）、16））
if（table.length == 1 << bc && bc <12）
BC ++;
}
返品結果;
}
//バイト配列データレイアウトに従って最小限のdivで描画
関数deflayout（データ、パレット、幅、高さ、画像、ブロック、ズーム）{
var map = new Array（height）;
for（var i = 0; i <height; i ++）{
map [i] = new Array（width）;
for（var j = 0; j <width; j ++）
map [i] [j] = data [i*width+j];
}
var i、j、i1、i2、j1、j2、c;
for（i = 0; i <height; i ++）
for（j = 0; j <width;）{
if（map [i] [j] == 0x100）{
J ++;
続く;
}
c = map [i] [j];
for（i1 = i+1; i1 <height && map [i1] [j] == c; i1 ++）;
for（j1 = j+1; j1 <width; j1 ++）{
for（i2 = i; i2 <i1 && map [i2] [j1] == c; i2 ++）;
if（i2 <i1）
壊す;
}
for（i2 = i; i2 <i1; i2 ++）
for（j2 = j; j2 <j1; j2 ++）
Map [i2] [J2] = 0x100;
var x = block.clonenode（true）;
X.Style.Left = J*Zoom;
x.style.top = i*zoom;
X.Style.Width =（J1-J）*Zoom;
x.style.height =（i1-i）*Zoom;
X.Style.BackGroundColor = Palette [c];
image.appendChild（x）;
j = j1;
}
}
</script>
<スクリプト>
関数main（）{
var t = new date（）。getTime（）;
var xmldom = document.getElementById（ "imgdata"）;
var gif = getgif（ "r0lgodlhdwapakecaaazmzm /////// waaacwaaaadwapaaaciispeqhsrz5modrlln48cxf8m2iq3ymkqvlrtw4mlwwach iqaaow == "）;
var info = document.getElementById（ "Info"）;
info.innerhtml = gif.showinfo（ "<br>"）;
t = new date（）。getTime（）;
gif.frames [0] .draw（document.getElementbyId（ "canvas"）、1）;
info.innerhtml+= "<br>描画時間"+（new date（）。gettime（） - t）+"ms";
}
</script>
<body onload = "main（）">
<div id = "canvas"> </div>
<hr>
<div id = "info">ページは読み込まれています。待ってください... </div>
</body>
</html>
PS：参照用のオンライン画像ツールをいくつか紹介します
base64への画像変換オンラインツールをエンコードする：
http://tools.vevb.com/transcoding/img2base64
オンラインメールメールアイコン作成ツール：
http://tools.vevb.com/email/emaillogo
オンラインPS画像処理ツール：
http://tools.vevb.com/aideddesign/webps
オンライン画像形式変換（JPG/BMP/GIF/PNG）ツール：
http://tools.vevb.com/aideddesign/picext
ICOアイコンオンライン生成ツール：
http://tools.vevb.com/aideddesign/ico_img
添付ファイル：さらに、base64エンコーディング変換ツールが推奨されます
Base64エンコードおよびデコードツール：
http://tools.vevb.com/transcoding/base64