<!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>
相关推荐
主要介绍了js对图片base64编码字符串进行解码并输出图像的具体实现,大家可以参考下面的示例
提供一种Base64编码,并输出UTF-8格式的BASE64编码方式。本程序在微信小程序开发工具中已经测试通过。 Base64代码: [javascript] view plain copy print? (function(){ var BASE64_MAPPING = [ 'A','B','C','D',...
一. Base64编码由来 为什么会有Base64编码呢?...Base64编码应运而生,Base64就是一种 基于64个可打印字符来表示二进制数据的表示方法。 二. Base64编码原理 看一下Base64的索引表,字符选用了”A-Z、a-z、0-9、+、
上次给大家分享了如何用js实现剪切板粘贴上传图片,今天跟大家分享下JS Base64编码解码。 1. 基础不牢,选型糟糕 糟糕的技术选型往往源自自身技术广度不足。就在数月前,一个前端HTML字符信息转Base64的需求,我是...
概述使用您的浏览器将图像编码和解码为 base64 以将图像嵌入到 HTML 和 CSS 中。特征生成 CSS 和 HTML 代码以... 将 base64 图像字符串恢复为图像文件。 Vanilla Javascript(无依赖)。 仅适用于现代浏览器。 ##演示
Clip_B64 该项目旨在将文件内容复制到剪贴板。 在linux / cygwin中,有一些简单的命令可以这样做: ... 结果经过base64编码,可以从剪贴板粘贴到putty-ssh远程shell窗口中,并可以使用控制台命令base64 -d解码。
20180828开发,提供了三... WEB方式未实现,后期自行研究(可通过JS将前台上传的图片处理成Base64编码格式的字符串, 然后将Base64字符串传参到Controller后进行解码处理后再存储到BLOB字段。 依赖Jar包: ojdbc6.jar
包括Unicode编码和解码、UTF-8字符串编码和解码、Base64字符串编解码、字符串MD5编码,前端非常实用的工具 图片Base64编码 对图片文件进行base64编码,直接拷贝datauri格式的数据 二维码生成器 能对网址、普通文本...
包括Unicode编码和解码、UTF-8字符串编码和解码、Base64字符串编解码、字符串MD5编码,前端非常实用的工具 图片Base64编码 对图片文件进行base64编码,直接拷贝datauri格式的数据 二维码生成器 能对网址、普通文本...
字符串编解码(Unicode/UTF8/Base64/MD5) 代码美化工具(HTML/CSS/JS/XML/SQL) 代码压缩工具(HTML/CSS/JS) 二维码生成器(支持当前页面、图片、链接、选中的文字生成QrCode) 二维码解码器(支持网页二维码右键...
字符串编解码(Unicode/UTF8/Base64/MD5) 代码美化工具(HTML/CSS/JS/XML/SQL) 代码压缩工具(HTML/CSS/JS) Json串格式化(粘贴文本、手动格式化) Json页面美化(页面自动检测并格式化,强制开启) 二维码生成器...
字符串编解码(Unicode/UTF8/Base64/MD5) 代码美化工具(HTML/CSS/JS/XML/SQL) 代码压缩工具(HTML/CSS/JS) 二维码生成器(支持当前页面、图片、链接、选中的文字生成QrCode) 二维码解码器(支持网页二维码...
以下是一些需要 base64 或十六进制编码/解码一些二进制数据的(常见)用例: 将 png 图像编码为数据 URL(对 png 进行 base64 编码) 从加密摘要(哈希)创建十六进制字符串从crypto.getRandomValues生成随机 ID...
包含字符串编解码,Json串格式化,代码美化工具,代码压缩工具,二维码生成器,页面取色工具,Js正则表达式,时间(戳)转换,图片Base64,编码规范检测,页面性能检测
google插件拖拽安装 ...字符串编码解码 Json格式转换 代码美化 代码压缩 二维码生成 网页转换为图片 页面取色 js正则表达式 时间戳转换 图片的base64 Markdown的转换 编码规范检测 页面性能检测 ajax调试开关
大致流程:客户端读取图片,经过Base64编码,转成字符串的形式,保存到json中,通过socket传到服务端,然后Base64解码,再转换成图片 一.服务端 1.main.cpp #include #include #include "Base64_1.h" #include ...
拥有字符串编解码,json串格式化,代码美化,代码压缩,二维码生成,页面取色器,js正则表达式工具(带常用正则),时间(戳)转换,图片Base64,编码规范检测,页面性能检测,Ajax调试功能,简直是WEB开发利器
然后,将这些字符串解码为图像,并将其作为帧存储在图像目录中。 当我们访问该网站时,一个javascript函数会按照函数本身指定的帧率显示帧。 因此,当我们访问网站时,我们可以观看流式视频。 由于我们使用的是正常...