<!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);
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>
<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>
<body onload="main()">
<div id="canvas"></div>
<hr>
<div id="info">页面载入中，请稍候...</div>
</body>
</html>
分享到：
相关推荐
在本示例中，我们讨论的是如何使用JavaScript对基于Base64编码的图片进行解码并显示在网页上。Base64是一种用于将二进制数据编码为ASCII字符串的编码方式，它在传输或存储非文本数据时非常有用，例如图片。 在HTML...
这段代码首先定义了一个字符串`plainText`，然后使用`Base64.getEncoder().encode()`进行编码，编码后的结果以字节数组形式保存，再转换回字符串打印出来。接着，通过`Base64.getDecoder().decode()`对编码后的字节...
这个方法会按照Base64的标准对字节进行编码，生成的结果是一个包含Base64字符的字符串。 2. **Base64解码**： - 当接收到Base64编码的字符串后，我们可以调用QByteArray的fromBase64()静态方法将其转换回原始的...
而在JavaScript中，可以使用btoa()函数对字符串进行Base64编码，以及atob()函数对Base64编码的字符串进行解码。 关于浏览器对Base64编码数据的支持，当前主流浏览器如IE8、Firefox、Chrome和Opera等都已经支持Data ...
总之，图片文件与Base64编码字节数组字符串之间的转换是通过读取文件、进行Base64编码/解码来实现的。Java提供了内置的工具类来支持这一过程，使得这种转换变得简单而高效。理解并熟练运用这种转换技巧，对于开发者...
以下是一个简单的Servlet示例，用于接收前端发送的Base64编码字符串并解码： ```java import javax.servlet.http.*; import java.io.*; import java.util.Base64; public class Base64Servlet extends HttpServlet...
例如，一个基于JavaScript的网页应用可以将这个BASE64字符串作为数据发送到服务器，服务器端再解码还原为二维码图片，这样就实现了图片的无损传输。 总结起来，"二维码图片转换成BASE64字符串"涉及的主要知识点包括...
在JavaScript中，Base64编码和解码是经常用到的功能，尤其是在处理图像、JSON数据或者进行跨平台通信时。 ### Base64编码原理 Base64编码的基本思想是将每3个字节（24位）的数据转换为4个6位的字符（共24位），然后...
在JavaScript中进行Base64编码和解码，可以借助内置的`btoa()`和`atob()`函数，或者使用第三方库，如在给定的压缩包文件`x-base64-master`中可能包含的`base64.js`。 ### 1. JavaScript内置函数 #### Base64编码 ...
3. **Base64字符串转换回图片**：在前端展示或后端处理时，可能会需要将Base64字符串解码回图片。在JavaScript中，可以使用`atob()`函数解码，然后创建Blob对象，再通过URL.createObjectURL()生成一个临时URL，最后...
将前端压缩并编码的base64图片发送到服务器后，后台需要进行解码和保存操作。以下是一个简单的Java后台工具类示例： ```java public class Base64Util { public static byte[] base64ToBytes(String base64Str) { ...
2. 分组：根据Base64编码规则，将编码字符串分为4个字符一组。 3. 解码：将每个字符转换回6位的二进制数。 4. 拼接：将4个6位二进制数连接成一个24位的二进制数据块，如果原始数据有填充，这里会得到少于3字节的结果...
- 对Base64编码的字符串，按照Base64字符表逆向查找对应的二进制值，每4个字符还原为3个字节的二进制数据。 - 填充字符"="用来标识原始数据的长度，若出现1个"="，则最后一个Base64字符代表4位二进制；若出现2个"=...
在JavaScript中，我们可以使用btoa()函数对字符串进行Base64编码，atob()函数则用于解码。对于图片，通常是从服务器获取到一个Base64编码的字符串，例如通过Ajax请求或者直接写在HTML的data URI中。 要实现Base64...
如果需要对图片进行安全保护，通常会使用如AES、RSA等加密算法，而BASE64编码只能作为传输中的辅助手段。 4. **图片解密**：这里的“解密”可能指的是从BASE64字符串恢复到原始图片数据的过程。这个过程称为解码，...
`btoa()`函数用于将一个DOMString（即包含ASCII字符的字符串）编码为一个BASE64编码的字符串，而`atob()`则用于将一个BASE64编码的字符串解码回原始的DOMString。 不过，这两个函数在处理非ASCII字符时可能会出现...
编码后的Base64字符串可以复制并用于其他应用中，解码则会得到原始的二进制数据，如果可能的话，可以将其保存为文件。 "base64.exe"是这个工具的可执行文件，通常在Windows环境下运行。用户只需双击该文件，工具就...
`jquery.base64.js`就是这样一个jQuery插件，它提供了方便的API来实现字符串的Base64编码和解码操作，使得在JavaScript环境中处理Base64更加便捷。 Base64编码是一种将任意二进制数据转换为可打印ASCII字符的编码...
在IT行业中，Base64是一种常见的数据编码方法，它将任意二进制数据转换为可打印的ASCII字符串。这种编码方式常用于在网络上传输非文本数据，如图片、PDF文档等，因为HTTP协议和电子邮件系统通常只能可靠地传输ASCII...