JS decodes the picture Base64 encoded string and prints out the image sample _javascript tips

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<style>
Body{padding-left:75px;background-color:beige}
</style>
<script>
///////////////////////////
Base64 encoded GIF image decoding
by Mozart0
2005/10/29
////////////////////

Create an object of a GIF class
Class GIF defined inside this function
BASE64 encoded string for Str64:gif file
Successfully returned the created GIF object
Failure returns null
function Getgif (str64) {
var bytes=decodebase64 (str64);
if (!bytes) {
Alert ("Error: Invalid BASE64 encoding");
return 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 ("Error: Non-GIF image format");
return null;
}
gif.width=bytes[i]| (BYTES[I+1]&LT;&LT;8);
gif.height=bytes[i+2]| (BYTES[I+3]&LT;&LT;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&AMP;&AMP;BYTES[J+1]==0XF9)
Break
if (j==bytes.length) {
for (; i<bytes.length;i++)
if (bytes[i]==0x2c)
Break
if (i==bytes.length) {
Alert ("Error: Image data not found");
return null;
}
var f=new gif_frame ();
if (!getsingleframe (i,f))
return null;
Else
Gif.frames.push (f);
}
else{
I=j;
do{
var f=new gif_frame ();
var t=getsingleframe (i,f);
if (!t)
return null;
Gif.frames.push (f);
for (i+=t;i<bytes.length;i++)
if (BYTES[I]==0X21&AMP;&AMP;BYTES[I+1]==0XF9)
Break
}
while (i<bytes.length);
}
return GIF;

Internal process, generating a color table
function 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));
return Len;
}

Internal processes, integrating data segments
function 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;
}
return p-pos;
}

Internal process, get a frame of data
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]&LT;&LT;8);
for (i+=5;i<bytes.length&&bytes[i]!=0x2c;i++);
if (i==bytes.length) {
Alert ("Error: Image identifier not found");
return 0;
}
}
frame.offsetx=bytes[i+1]| (BYTES[I+2]&LT;&LT;8);
frame.offsety=bytes[i+3]| (BYTES[I+4]&LT;&LT;8);
frame.width=bytes[i+5]| (BYTES[I+6]&LT;&LT;8);
frame.height=bytes[i+7]| (BYTES[I+8]&LT;&LT;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);
}
else{
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;
}

To define a data structure for storing GIF files
Provides method showinfo, returns picture information
function GIF () {
This.version= ""; Version number
this.width=0; Logical screen width
this.height=0; Logical screen Height
this.colorresolution=0; Color depth
This.sorted=false; Global color Table Category labels
This.globalpalette=null; Global color Table
This.backgroundindex=-1; Background color Index
this.pixelaspectradio=0; Pixel width/height ratio
This.frames=[]; Image frames, see Gif_frame
This.showinfo=function (Sep) {//Display picture information, Sep is row separator
if (!SEP)
Sep= "\ n";
var s= "Gif infomation:" +sep+ "-------------------";
S+=subinfo (this) +sep;
for (Var i=0;i<this.frames.length;i++)
S+=sep+ "Frames" +i+ "----------" +subinfo (this.frames[i));
return s;
function Subinfo (o) {
var s= "";
for (var i in O) {
if (i== "Showinfo" | | i== "Draw")
Continue
s+=sep+i+ ":";
if (typeof (O[i]) = = "Object")
s+= (o[i]?o[i].length: "null");
Else
S+=o[i];
}
return s;
}
}
}

Defines a data structure that stores a frame of image
Provides method draw, drawing
function Gif_frame () {
this.offsetx=0; X Direction offset
this.offsety=0; Y-direction offset
this.width=0; Image width
this.height=0; Image Height
This.localpalette=null; Local Color table
this.colorresolution=0; Color depth
This.interlace=false; Staggered flag
This.sorted=false; Local Color Table category labels
This.data=[]; Image data, an integer index that stores the color of each pixel
This.transparentindex=-1; Transparent Color Index
this.delay=0; Frame delay
This.draw=function (parent,zoom) {
if (!this.data.length)
Return
if (!parent)
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);
Delete T;
}
}
}

Base64 decoding
Strin, input string
Successfully returns an array in which each element contains a byte of information
Failure returns null
function DecodeBase64 (strin) {
if (!strin.length| | strin.length%4)
return 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&LT;&LT;2) | (C1&GT;&GT;4);
b1= (c1<<4) | (C2&GT;&GT;2);
B2= (c2<<6) |c3;
Result.push (B0&AMP;0XFF);
Result.push (B1&AMP;0XFF);
Result.push (B2&AMP;0XFF);
}
if (Len1!=len) {
C0=index64[strin.charat (i)];
C1=index64[strin.charat (i+1)];
C2=strin.charat (i+2);
b0= (C0&LT;&LT;2) | (C1&GT;&GT;4);
Result.push (B0&AMP;0XFF);
if (c2!= ' = ') {
C2=INDEX64[C2];
b1= (c1<<4) | (C2&GT;&GT;2);
Result.push (B1&AMP;0XFF);
}
}
return result;
}

LZW decoding function for GIF
Arrbytes is the source data, Nbits is the initial number of digits
The array is successfully returned, with each element including a color index
Failure returns null
function DECODELZW (arrbytes,nbits) {
var cc=1<< (nBits-1);
var eoi=cc+1;
var table=[],mask=[],result=[];
for (Var i=0;i<cc;i++)
Table[i]= (I&GT;&GT;8&AMP;0XF). toString (16)
+ (I&GT;&GT;4&AMP;0XF). ToString (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&LT;BC) {
temp=temp| (Arrbytes[pos++]<<tleft);
tleft+=8;
}
code=temp&mask[bc];
TLEFT-=BC;
temp>>=bc;
if (CODE==EOI)
Break
if (CODE==CC) {
table.length=cc+2;
Bc=nbits;
Old=code;
Continue
}
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);
}
else{
Alert ("Error: Invalid image data");
return 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++;
}
return result;
}

Complete the drawing with the fewest div based on the byte array data layout
function Deflayout (data,palette,width,height,image,block,zoom) {
var map=new Array (height);
for (Var i=0;iMap[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;ifor (j=0;j<width;) {
if (map[i][j]==0x100) {
j + +;
Continue
}
C=MAP[I][J];
for (i1=i+1;i1for (j1=j+1;j1<width;j1++) {
for (i2=i;i2<i1&&map[i2][j1]==c;i2++);
if (I2&LT;I1)
Break
}
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>

<script>
function Main () {
var t=new Date (). GetTime ();
var Xmldom=document.getelementbyid ("Imgdata");
var gif=getgif ("R0lgodlhdwapakecaaaazmzm/////waaacwaaaaadwapaaaciispeqhsrz5modrlln48cxf8m2iq3ymmkqvlrtw4mlwwach +h09wdgltaxplzcbiesbvbgvhzcbtbwfydfnhdmvyiqaaow== ");
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> Drawing Time Consuming" + (new Date (). GetTime ()-T) + "MS";
}
</SCRIPT>
<body onload= "main ()" >
<div id= "Canvas" ></div>
<div id= "Info" > page load, please wait ...</div>
</body>

PS: Here again for you to recommend several online picture Tools for everyone to use the reference

Picture converted to BASE64 encoded online tool:
Http://tools.jb51.net/transcoding/img2base64

Online Email Email icon Production tool:
Http://tools.jb51.net/email/emaillogo

Online PS image processing tools:
http://tools.jb51.net/aideddesign/webps

Online picture format conversion (jpg/bmp/gif/png) Tool:
Http://tools.jb51.net/aideddesign/picext

ico icon Online generation tool:
http://tools.jb51.net/aideddesign/ico_img

Attached: In addition, we recommend a Base64 Code conversion tool

BASE64 Encoding and decoding tool:
http://tools.jb51.net/transcoding/base64