游客

标题:JS压缩的另类方法 -- 将JS文件压缩成PNG图像存储方法
正文:
一般的压缩js的方法，都是在线压缩的，例如：YUI压缩工具 (http://developer.yahoo.com/yui/compressor/)Dean Edwards Packer (http://dean.edwards.name/packer/)JSMin (http://crockford.com/JavaScript/jsmin)UglifyJS (http://marijnhaverbeke.nl/uglifyjs)你有没有想过：为了压缩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写的压缩文件地址。$filename = "prototype-1.6.0.2.js"; if (file_exists($filename)) { $iFileSize = filesize($filename); $iWidth = ceil(sqrt($iFileSize / 1)); $iHeight = $iWidth; $im = imagecreatetruecolor($iWidth, $iHeight
[<<][[1]][2][3][>>]

查看评论(0)
发表评论



首页