你有没有想过：为了压缩js文件，把js文件转化成png图像，然后用 canvas 控件中的 getimagedata() 函数将图像再重新读成js文件。我昨天在这里发表的js文件快速加载的文章中提到了这一方法，有网友对这个做法很感兴趣，于是今天详细解读一下。
这样可以做到很高的压缩比，到底有多高，下面会提到。这种方法用到了 canvas 控件，这也意味着只有支持 canvas 控件的浏览器下才有效。
现在你可以看到，上面的图像类似一个噪声图像，但它实际上是一个由124k的 prototype 框架代码转化成的30k的8位png图像（压缩比还不错吧）。
其实，要将代码转化为图像的格式存储，可以转化成gif和png格式。png格式的图像有24位和8位，用24位的rgb图像，每个像素可以存储3字节的数据，如果是用8位的rgb图像，每个像素可以存储1字节的数据。
在photoshop中做测试发现：一个300x100的纯色杂点8位图像可以压缩到5k，而同样的纯色杂点图像，如果是100x100的24位图像只能压缩到20k。如果是同样图案的8位gif图像，压缩效果比png要差一些。所以，我们选择用8位的png图像作为压缩和解压缩的存储格式。
现在，我们就需要开始压缩图像了，下面是用php写的压缩文件的方法：
它读取js文件并创建一个png图像，图像中的每个像素中是一个0-255之间的值，而这个值对应的是js字符的ascii的值。
 
当然，除了压缩，还要有解压缩，也就是将图像读取为js文件的过程。这个函数是用js写的，具体代码如下：
function loadpngdata(strfilename,fnccallback){ var bcanvas=false; var ocanvas=document.createelement(canvas); if(ocanvas.getcontext){ var octx=ocanvas.getcontext(2d); if(octx.getimagedata){ bcanvas=true; } } if(bcanvas){ var oimg=new image(); oimg.style.position=absolute; oimg.style.left=-10000px; document.body.appendchild(oimg); oimg.onload=function(){ var iwidth=this.offsetwidth; var iheight=this.offsetheight; ocanvas.width=iwidth; ocanvas.height=iheight; ocanvas.style.width=iwidth+px; ocanvas.style.height=iheight+px; var otext=document.getelementbyid(output); octx.drawimage(this,0,0); var odata=octx.getimagedata(0,0,iwidth,iheight).data; var a=[]; var len=odata.length; var p=-1; for(var i=0;i 0) a[++p]=string.fromcharcode(odata[i]); }; var strdata=a.join(); if(fnccallback){ fnccallback(strdata); } document.body.removechild(oimg); } oimg.src=strfilename; return true; } else{ return false; } }
最后给出在线测试地址，在这个网页上，您可以在列表中选择一个png图像文件，点击 load file 按钮可以在网页上看到这个图像，在图像的下面是由这个图像所读出来的代码文件。
http://www.nihilogic.dk/labs/canvascompress/
您可能感兴趣的文章linux chmod(文件或文件夹权限设定)命令参数及用法详解php实现将文件批量压缩打包下载php用ziparchive函数实现文件的压缩与解压缩smarty临时文件创建失败的解决办法php判断远程文件是否存在的办法php获取目录所有文件并将结果保存到数组的程序js获取按键的代码，js如何屏蔽用户的按键，js获取用户按键对应的asii码（兼容所有浏览器）js地址栏特效（显示页面内所有加链接的图片的大小和查看当前的浏览器的高度）
http://www.bkjia.com/phpjc/764125.htmlwww.bkjia.comtruehttp://www.bkjia.com/phpjc/764125.htmltecharticle你有没有想过：为了压缩js文件，把js文件转化成png图像，然后用 canvas 控件中的 getimagedata() 函数将图像再重新读成js文件。我昨天在这里发...