js對圖片base64編碼字符串進行解碼並輸出圖像示例

作者：Eve Cole 更新時間：2025-02-11 18:12:01

複製代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

body{padding-left:75px;background-color:beige}

</style>

///////////////////////////

//base64編碼的GIF圖像解碼

//By Mozart0

//2005/10/29

////////////////////

//建立GIF類的對象

//類GIF在此函數內部定義

//str64：gif文件的Base64編碼字符串

//成功返回創建的GIF對象

//失敗返回null

function getGif(str64){

var bytes=decodeBase64(str64);

if(!bytes){

alert("錯誤：無效的Base64編碼");

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("錯誤：非Gif圖像格式");

return 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)

break;

if(j==bytes.length){

for(;i<bytes.length;i++)

if(bytes[i]==0x2c)

break;

if(i==bytes.length){

alert("錯誤：找不到圖像數據");

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;

//內部過程，生成色表

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;

}

//內部過程，整合數據段

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;

}

//內部過程，獲取一幀數據

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("錯誤:找不到圖像標誌符");

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;

}

//定義存儲GIF文件的數據結構

//提供方法showInfo,返回圖片信息

function 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=[]; //圖像各幀，見GIF_Frame

this.showInfo=function(sep){ //顯示圖片信息,sep為行分隔符

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;

}

//定義存儲一幀圖像的數據結構

//提供方法draw,繪圖

function 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; //透明色索引

this.delay=0; //幀延時

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解碼

//strIn，輸入字符串

//成功返回一個數組，每一個元素包含一字節信息

//失敗返回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=(c1<<4)|(c2>>2);

result.push(b1&0xff);

}

return result;

}

//用於GIF的LZW解碼函數

//arrBytes為源數據,nBits為初始編碼位數

//成功返回數組，每個元素包括一個顏色索引

//失敗返回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(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)

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("錯誤：圖像數據無效");

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;

}

//根據字節數組data佈局，以最少的div完成繪圖

function defLayout(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>

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>繪圖耗時"+(new Date().getTime()-t)+"ms";

}

</SCRIPT>

<hr>

<div id="info">頁面載入中，請稍候...</div>

</body>

</html>

PS：這裡再為大家推薦幾款在線圖片工具供大家參考使用

圖片轉換為Base64編碼在線工具：

http://tools.VeVB.COm/transcoding/img2base64

在線Email郵箱圖標製作工具：

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