首页 >> 下载中心 >> JavaScript源码 >> 用JS实现GIF图像的解码和显示

用JS实现GIF图像的解码和显示

作者:mozart0 来源:蓝色理想时间:2007-10-14 网友评论条【大中小】

原文件以base64编码，xml格式；

实用价值不谈先

对算法有兴趣的可一看

显示速度不佳，大家给点意见！

示例1:调用GIF_Frame 的成员函数draw(第一个参数为父元素，第二个为放大倍数)绘图

对于有成块相同像素的图像，这种方法比较快，它试图使用最少的div元素描绘图像。

暂未处理透明像素和行交错

演示地址:http://mozart0.uni.cc/jsgif/draw.htm

下面是该页的代码，保存到本地才能正常运行
<base href="http://mozart0.uni.cc/jsgif/"> <style> body{padding-left:75px;background-color:beige} </style> <script src="gif.js"></script> <script> function main(){ var t=new Date().getTime(); var xmldom=document.getElementById("imgData"); var gif=getGif(xmldom.selectSingleNode("/file/data").text); var info=document.getElementById("info"); info.innerHTML=gif.showInfo("<br>") +"<br><br>xml文件:"+xmldom.xml.length+"字节" +"<br>解码耗时"+(new Date().getTime()-t)+"ms"; t=new Date().getTime(); gif.frames[0].draw(document.getElementById("canvas"),1); info.innerHTML+="<br>绘图耗时"+(new Date().getTime()-t)+"ms"; } </script> <body onload="main()"> <xml src="y_gif.xml" id="imgData"></xml> <div id="canvas"></div> <hr> <div id="info">页面载入中，请稍候...</div> </body> [提示：你可先修改部分代码]

示例2:自定义函数，使用GIF_Frame的数据成员绘图；

对绘制的图像，脚本可以完全控制，如替换图像的调色板实现色调变换等

演示地址:http://mozart0.uni.cc/jsgif/showimg.htm

下面是该页的代码，保存到本地才能正常运行

<base href="http://mozart0.uni.cc/jsgif/"> <style> body{ padding-left:72px; background-color:beige; } #canvas DIV{ font-size:9px; line-height:6px; overflow:hidden; letter-spacing:-3px; word-break:keep-all; } </style> <script src="gif.js"></script> <script> function showImg(canvas,indexs,palette,w,h){ canvas.innerHTML=""; var dv=document.createElement("DIV"); canvas.appendChild(dv); for(var i=0;i<w;i++){ var ft=document.createElement("FONT"); ft.innerText="●" dv.appendChild(ft); } for(var j=1;j<h;j++) canvas.appendChild(dv.cloneNode(true)); for(var i=0;i<h;i++){ var t=canvas.children[i].children; for(var j=0;j<w;j++) t[j].color=palette[indexs[i*w+j]]; } } function main(){ var t=new Date().getTime(); var xmldom=document.getElementById("imgData"); var gif=getGif(xmldom.selectSingleNode("/file/data").text); var info=document.getElementById("info"); info.innerHTML=gif.showInfo("<br>") +"<br><br>xml文件:"+xmldom.xml.length+"字节" +"<br>解码耗时"+(new Date().getTime()-t)+"ms"; t=new Date().getTime(); var f=gif.frames[0]; showImg(document.getElementById("canvas"),f.data,f.localPalette,f.width,f.height); info.innerHTML+="<br>绘图耗时"+(new Date().getTime()-t)+"ms"; } </script> <body onload="main()"> <xml src="y_gif.xml" id="imgData"></xml> <div id="canvas"></div> <hr> <div id="info">页面载入中，请稍候...</div> </body> [提示：你可先修改部分代码]

实现解码的gif.JS文件:

下载地址：gif.rar （3.17 KB）

示例用y_gif.xml文件:

下载地址：y_gif.rar （6.49 KB）

实现base64编码并生成xml文件的vbs脚本:

'此脚本对二进制进行base64编码，存为xml文件 '请存为本地文件，扩展名为.vbs '拖放一个或多个文件的图标到脚本文件的图标，目标文件将与源文件在相同目录 '因脚本执行速度有限，原文件不宜过大 'By Mozart0 '2005/10/29 option explicit dim chr64(64) call main sub main dim i,n,bs bs="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/" n=len(bs) for i=1 to n chr64(i-1)=mid(bs,i,1) next dim s,count count=0 for each s in WScript.Arguments procFile s count=count+1 next msgbox count & " files processed" end sub sub procFile(byval path) dim ado,bytes,i set ado=CreateObject("Adodb.Stream") ado.Type=1 ado.Mode=3 ado.Open ado.LoadFromFile path bytes=ado.Read(ado.size) ado.Close ado.Type=2 ado.Charset="gb2312" ado.Open ado.WriteText "<?xml version=""1.0""?>" & vbcrlf ado.WriteText "<file>" & vbcrlf ado.WriteText " <name>" & name & "</name>" & vbcrlf ado.WriteText " <data>" dim n,size n=lenb(bytes) size=256*3 if n>10240 then size=size+fix(log(n/10240)*100)*3 for i= 1 to n-1 step size ado.WriteText EncodeBase64(midb(bytes,i,size)) next ado.WriteText " </data>" & vbcrlf ado.WriteText "</file>" dim path2,name i=instrrev(path,"\") name=mid(path,i+1) path2=left(path,i) i=instrrev(name,".") path2=path2 & left(name,i-1) & "_" & mid(name,i+1) & ".xml" ado.SaveToFile path2,2 ado.Close set ado=nothing end sub function encodeBase64(source) dim i,j,c0,c1,c2,c3,b0,b1,b2 dim len,len1,len2 dim target len=lenb(source) len2=len mod 3 len1=len-len2 target="" for i=1 to len1 step 3 b0=ascb(midb(source,i,1)) b1=ascb(midb(source,i+1,1)) b2=ascb(midb(source,i+2,1)) c0=b0\4 c1=(b0 and &h3)*16 and &hff or b1\16 c2=(b1 and &hf)*4 and &hff or b2\64 c3=b2 and &h3f target=target & chr64(c0) target=target & chr64(c1) target=target & chr64(c2) target=target & chr64(c3) next if len2=0 then EncodeBase64=target exit function end if b0=ascb(midb(source,i,1)) c0=b0\4 target=target & chr64(c0) if len2=1 then c1=((b0 and &h3)*16) and &hff target=target & chr64(c1) target=target & "=" target=target & "=" else b1=ascb(midb(source,i+1,1)) c1=(b0 and &h3)*16 and &hff or b1\16 c2=(b1 and &hf)*4 and &hff target=target & chr64(c1) target=target & chr64(c2) target=target & "=" end if EncodeBase64=target end function [提示：你可先修改部分代码]

【加入收藏】【报告错误】【投递文章】【复制地址】【返回顶部↑】

本文地址：http://www.aspxhome.com/download/javascript/200710/199214.htm

站长工具

请稍等，评论加载中...

热门点击排行今日点击排行本周点击排行本月点击排行最新访问排行热门评论排行

首页 - 关于站点 - 联系站长 - 免责声明 - 版权隐私 - 网站地图 - 友情链接 - 广告服务 - Top

学习Asp到中国Asp之家（Aspxhome.com）

闽ICP备06017341号