使用PNG和Canvas压缩CSS和JavaScript

这是一个偷偷摸摸的把戏。 它是由Nihilogic.dk的Jacob Seidelin设计的，并已被10K An Event Apart比赛的一些参与者使用，尽管有人质疑它是否符合比赛的精神。

也就是说，看看它是如何完成的很有趣，所以让我们看一下。 步骤如下：

1.最小化您的应用程序
第一步是使用任何合适的压缩工具将最终CSS和JavaScript 压缩到最小尺寸。

2.将CSS和JavaScript编码为图形
这是棘手的部分。 您需要将ASCII编码的CSS和JavaScript文件转换为单个二进制图像。 PNG格式是最好的，因为它是无损的（保留了您的代码），使用zlib压缩并且受所有浏览器支持。

Web开发人员Cal Henderson发布了他的研究和PHP / Perl代码 ，该代码使用多种格式将代码转换为图像，例如1位，8位，24位等。 您可以在此处以1位正方形查看jQuery库 。

可以使用Smush.it和PNGOUT之类的工具进一步减小PNG的大小。

3.从图像中提取代码
现在，我们需要加载图像并将其转换回可执行代码。 这可以通过使用drawImage()方法将图像加载到canvas元素中来实现。 然后使用getImageData()读取各个像素，并将其转换为可以传递给eval()或嵌入DOM的字符串。

结果各不相同，但是可以节省75％的文件大小。 在某些情况下，图像格式可能会击败使用Gzip压缩的文件。 因此，您可以使用40Kb的代码进入10K竞赛！

这有实际用途吗？

那么，除了在比赛中作弊外，这项技术还可以在现实世界中使用吗？ 这是一个有趣的hack，但是在服务器上对源文件进行Gzip压缩通常会带来更好的压缩效果，并且易于实现。

但是，我可以看到该技术用于隐写术或用于加密来自新手黑客的敏感代码。 很酷，但是您会用吗？

From: https://www.sitepoint.com/compress-css-javascript-png-canvas/