萬盛學電腦網 >> 腳本專題 >> javascript >> js對圖片base64編碼字符串進行解碼並輸出圖像
js對圖片base64編碼字符串進行解碼並輸出圖像
這篇文章主要介紹了js對圖片base64編碼字符串進行解碼並輸出圖像的具體實現，大家可以參考下面的示例
代碼如下: <!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編碼的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); resuljavascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved