This article mainly introduces JS to the picture Base64 encoded string decoding and output image of the specific implementation, you can refer to the following example
Code as follows: <! 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> body{padding-left:75px;background-color:beige} </style > <script> /////////////////////////// //base64 encoded GIF image decoding //by mozart0 //2005 /10/29 //////////////////// //Create GIF object /class GIF defines the BASE64 encoded string of //str64:gif files inside this function //successfully returned the created GIF object //Failure return 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; }&NBSp 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; (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) 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&&bytes[i+1]==0xf9) break; } while ( I<bytes.length); } return gif; //internal process, generate 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" + (s[i+1]<=0xf?) 0 ":" "+s[i+1].tostring" + (s[i+2]<=0xf?) 0 ":" ") +s[i+2].tostring; return len; } //internal process, consolidated data segment 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 to obtain a frame 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]<<8); for (i+=5;i<bytes.length&&bytes[i]!=0x2c;i++); if (i==bytes.length{ alert ("Error: Image marker not found"); return 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); } 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; } //define data structure for storing GIF files //provide method Showinfo, back to picture information function GIF () { this.version= "";//Version number THIS.WIDTH=0//Logical screen width &NBsp this.height=0; Logical screen height this.colorresolution=0; Color depth this.sorted=false; Global color Table classification mark 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 delimiter 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; } } } //define data structure for storing one frame image //provide method draw , drawing function gif_frame () { this.offsetx=0;//x direction offset this.offsety=0;//y direction offset this.width=0;// Image width &nbSp this.height=0; Image height this.localpalette=null; Local color table this.colorresolution=0; Color depth this.interlace=false; Staggered signs this.sorted=false; Local color Table classification mark this.data=[]; Image data, storing integer index this.transparentindex=-1 of pixel color; 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 decode //strin, input string //successfully return an array, each element contains one byte of information //Failure return 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<<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=) | ( C2>>2); Result.push (b1&0xff; } } return result; } / LZW decoding function //arrbytes for GIF for source data, nbits for initial encoded digits //successfully return array, each element including one color index //failure return 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>>8&0xf). toString + (I>>4&0XF). ToString (i&0xf). ToString (; ) 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) break; if (CODE==CC) { table.length=cc+2; bc=nbits; old=code; continue; } var t= ""; nbsp 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)) if (table.length==1<<bc&&bc<12) bc++; } return result; } //based on byte array data layout, complete drawing function deflayout with minimal div (Data,palette, Width,height,image,block,zoom) { 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++; continue; } 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) 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 Dat E (). GetTime (); var Xmldom=document.getelementbyid ("Imgdata"); var gif=getgif ("R0lgodlhdwapakecaaaazmzm Waaacwaaaaadwapaaaciispeqhsrz5modrlln48cxf8m2iq3ymm KQVLRTW4MLWWACH+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> <hr> <div id= "info "> Page load, please wait ...</div> </body> </html> Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
