This can achieve a very high compression ratio, exactly how high, the following will be mentioned. This method uses the canvas control, which means that only browsers that support canvas controls are available.
Now you can see that the image above is similar to a noisy image, but it is actually a 30K 8-bit PNG image converted from a 124K prototype frame code (compression ratio is good).
In fact, to convert the code into the format of the image storage, you can convert to GIF and PNG format. PNG format images have 24-bit and 8-bit, with 24-bit RGB images, each pixel can store 3 bytes of data, if it is a 8-bit RGB image, each pixel can store 1 bytes of data.
Test found in Photoshop: A 300x100 solid color 8-bit image can be compressed to 5 K, while the same solid color clutter image, if the 100x100 24-bit image can only be compressed to 20K. If it is a 8-bit GIF image of the same pattern, the compression effect is worse than PNG. So, we chose to use a 8-bit PNG image as the storage format for compression and decompression.
Now, we need to start compressing the image, the following is the compressed file address written in PHP.
Http://www.ipaperrater.com/code/07/js-to-png.txt
It reads the JS file and creates a PNG image in which each pixel in the image is a value between 0-255 and this value corresponds to the ASCII value of the JS character.
Of course, in addition to compression, but also to extract, that is, the process of reading the image as a JS file. This function is written in JS, you can download the file from the following location.
Http://www.ipaperrater.com/code/07/png-to-js.txt
Finally give the online test address, on this page, you can select a PNG image file in the list, click the Load File button to see this image on the page, in the image below is the image read out of the code file.
http://www.nihilogic.dk/labs/canvascompress/
You didn't think of it. Compression method: Compress JavaScript files into PNG image storage