js décode la chaîne codée en base64 de l'image et génère les compétences d'image example_javascript

Copier le code Le code est le suivant :

script>
//////////////////////////
//décodage d'images GIF encodées en base64
//Par Mozart0
//2005/10/29
////////////////////

//Créer un objet de classe GIF
/ /La classe GIF est définie à l'intérieur de cette fonction
// str64 : chaîne codée en base64 du fichier gif
// Renvoie l'objet GIF créé en cas de succès
// Renvoie null en cas d'échec
fonction getGif(str64) {
var bytes=decodeBase64(str64);
if(!bytes){
alert("Erreur : encodage Base64 invalide");
return null; =nouveau GIF();
for(var i=0;i<6;i )
gif.version =String.fromCharCode(bytes[i]); 0,3)!="GIF"){
alert("Erreur : format d'image non Gif");
return null;
gif.width=bytes[i]|( octets [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]; = octets[i 6];
if(f&0x80){
gif.globalPalette=[];
i =getPalette(i 7,bytes,gif.globalPalette,2<<(f&0x7));
}
i =7;
for(var j=i;jif(bytes[j]==0x21&&bytes[j 1]==0xf9)
break;
if(j==bytes.length){
for(;iif(bytes[i]==0x2c)
break
if(i==bytes.length){
alert("Erreur : données d'image introuvables");
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;iif(bytes[i]==0x21&&bytes[i 1]==0xf9)
break
}
while(i}
return gif;

//Processus interne, générer une table de couleurs
fonction getPalette(pos,s,d,len) {
len*=3;
for(var i=pos;id.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
}

//Processus interne, intégration Segment de données
fonction getBlock(pos,s,d){
var p=pos
while(len=s[p]){
for(var i=0;id.push(s[p i]);
p =len;
}
return p-pos
}

//Processus interne, obtenir Une trame de données
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;iif(i==bytes.length){
alert("Erreur : identifiant d'image introuvable"
return 0;
}
}
frame.offsetX=bytes[i 1]|(bytes[i 2]<<8); octets[i 4]<<8);
frame.width=bytes[i 5]|(octets[i 6]<<8);
frame.height=bytes[i 7 ] |(octets[i 8]<<8);
var f=octets[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=[]; getPalette(i,bytes,frame.localPalette,1<}
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;
}

//Définir la structure de données pour stocker les fichiers GIF
//Fournir la méthode showInfo et renvoyer les informations sur l'image
fonction GIF( ){
this.version=""; //Numéro de version
this.width=0; //Largeur d'écran logique
this.height=0; //Hauteur d'écran logique
this.colorResolution =0; //Profondeur de couleur
this.sorted=false; //Drapeau de classification de la table de couleurs globale
this.globalPalette=null; //Table de couleurs globale
this.backgroundIndex=-1; Index de couleur
this.pixelAspectRadio=0; //Rapport d'aspect des pixels
this.frames=[]; //Pour chaque image de l'image, voir GIF_Frame
this.showInfo=function(sep){ / /Afficher les informations sur l'image, sep est le séparateur de ligne
if(!sep)
sep="n"
var s="Gif information:" sep "----------; -- -------";
s =subInfo(this) sep;
for(var i=0;is =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;
}
}
}

//Définir la structure de données pour stocker un cadre d'image
//Fournir la méthode draw, draw
fonction GIF_Frame (){
this.offsetX=0; //Décalage de la direction X
this.offsetY=0; //Décalage de la direction Y
this.width=0 //Largeur de l'image
this.height=0; //Hauteur de l'image
this.localPalette=null; //Table des couleurs locales
this.colorResolution=0; //Profondeur de couleur
this.interlace=false;
this.sorted=false; //Drapeau de classification de la table de couleurs locale
this.data=[]; //Données d'image, stockant l'index entier de chaque couleur de pixel
this.transparentIndex=-1 ; /Indice de couleur transparente
this.delay=0; //Délai de trame
this.draw=function(parent,zoom){
if(!this.data.length)
return ; >if(!parent)
parent=document.body;
if(!zoom)
zoom=1
if(parent.clientWidthparent. style.width=this.width*zoom;
if(parent.clientHeightparent.style.height=this.height*zoom
var id=" ImgDefaultDraw";
var img=document.getElementById(id);
if(img)
delete parent.removeChild(img);
img=document.createElement("DIV"); id=id;
parent.appendChild(img);
img.style.position="absolute";
var t=document.createElement("DIV"); ="hidden";
t.style.position="absolute";
defLayout(this.data,this.localPalette,this.width,this.height,img,t,zoom
delete); t;
}
}
}

//Décodage Base64
//strIn, chaîne d'entrée
//renvoie un tableau avec succès, chaque élément contient un octet d'information
// Renvoie null en cas d'échec
function decodeBase64(strIn){
if(!strIn.length||strIn.length%4)
return null
var str64 =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 /=";
var index64=[];
for(var i=0;iindex64[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 c0=index64[ strIn.charAt(i)];
c1=index64[strIn.charAt(i 1)]
c2=index64[strIn.charAt(i 2)]; (je 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. );
b0=(c0<<2)|(c1>>4);
result.push(b0&0xff);
if(c2!='='){
c2 =index64[c2];
b1=(c1<<4)|(c2>>2);
result.push(b1&0xff); ;
}

//Fonction de décodage LZW pour GIF
//arrBytes est les données source, nBits est le nombre de bits d'encodage initial
//Renvoie avec succès le tableau, chaque élément inclut un index de couleur
// Renvoie null en cas d'échec
function decodeLzw(arrBytes,nBits){
var cc=1<<(nBits-1
var eoi=cc 1; >var table=[],mask=[],result=[];
for(var i=0;itable[i]=(i>>8&0xf) .toString (16)
(i>>4&0xf).toString(16) (i&0xf).toString(16);
for(i=2,mask[1]=1;i<13;i )
masque[i]=masque[i-1]<<1|1;
var bc=nBits
var pos=0,temp=0,tleft=0,code=0 ,old =0;
while(true){
while(tlefttemp=temp|(arrBytes[pos ]<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(codet=table[code];
if(old!=cc)
table.push(table[old] t.slice(0,3) );
}
else if(oldt=table[old] table[old].slice(0,3);
table.push(t); >}
else{
alert("Erreur : données d'image invalides");
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 ;
}
return result;
}

//Selon la disposition des données du tableau d'octets, complétez le dessin avec le moins de divs
function defLayout(data,palette ,largeur,hauteur,image,bloc,zoom){
var map=new Array(height);
for(var i=0;imap[i]=new Array( width);
for(var j=0;jmap[i][j]=data[i*width j]
}
var i, j, i1,i2,j1,j2,c;
for(i=0;ifor(j=0;jif(map[i ][ j]==0x100){
j
continuer
}
c=map[i][j]; i1] [j]==c;i1 );
pour(j1=j 1;j1pour(i2=i;i2if(i2pause
}
for(i2=i;i2for(j2=j;j2map[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> <br>function main(){ <br>var t=new Date().getTime(); <br>var xmldom=document.getElementById("imgData"); <br>var gif=getGif("R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw =="); <br>var info=document.getElementById("info"); <br>info.innerHTML=gif.showInfo("<br>"); <br>t=new Date().getTime(); <br>gif.frames[0].draw(document.getElementById("canvas"),1); <br>info.innerHTML ="<br>绘图耗时" (new Date().getTime()-t) "ms"; <br>} <br></SCRIPT>

---

页面载入中，请稍候...