Unexpectedly compressing JS files into PNG Image Storage Methods

Have you ever thought about: To Compress js files, convert js files into PNG images, and then use the getImageData () function in the canvas control to re-read images into js files. I mentioned this method in my post on rapid loading of JS files that I posted here yesterday. Some netizens are very interested in this method, so I will explain it in detail today.

In this way, a high compression ratio can be achieved. The following section describes how high the compression ratio is. This method uses the canvas control, which means that it is only effective in browsers that support the canvas control.

Now you can see that the above image is similar to a noisy image, but it is actually a 30 K 8-bit PNG image converted from the prototype Framework Code of 12 4 K. The compression ratio is good ).

In fact, to convert code into image format storage, you can convert it into GIF and PNG formats. PNG images have 24-bit and 8-bit RGB Images. Each pixel can store 3 bytes of data. If an 8-bit RGB image is used, each pixel can store 1 byte of data.

Tests in PHOTOSHOP show that a x 8-bit solid color noise image can be compressed to 5 K, and the same solid color noise image, for a x 24-bit image, it can only be compressed to 20 kb. For 8-bit GIF images with the same image, the compression effect is worse than that of PNG images. Therefore, we choose to use an 8-bit PNG image as the storage format for compression and decompression.

Now we need to start compressing the image. below is the compressed file address written in 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);  
  
  
    $fs = fopen($filename, "r");  
  
  
    $data = fread($fs, $iFileSize);  
  
  
    fclose($fs);  
  
  
    $i = 0;  
  
  
    for ($y=0;$y<$iHeight;$y++) {  
  
  
        for ($x=0;$x<$iWidth;$x++) {  
  
  
            $ord = ord($data[$i]);  
  
  
            imagesetpixel($im,   
  
  
                $x, $y,  
  
  
                imagecolorallocate($im,  
  
  
                    $ord,  
  
  
                    $ord,  
  
  
                    $ord 
  
  
                )  
  
  
            );  
  
  
            $i++;  
  
  
        }  
  
  
    }  
  
  
    header("Content-Type: image/png");  
  
  
    imagepng($im);  
  
  
    imagedestroy($im);  
  
  
}  
  
  
?> 
 
 

It reads the JS file and creates a PNG image. each pixel in the image is a value between 0 and, which corresponds to the ascII value of the JS character.

Of course, in addition to compression, we also need to extract the image, that is, the process of reading the image as a JS file. This function is written in JS and can be downloaded from the following location.

 
 

  
  
function loadPNGData(strFilename, fncCallback) {  
  
  
    // test for canvas and getImageData  
  
  
    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<len;i+=4) {  
  
  
                if (oData[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;  
  
  
    }  
  
  
} 
 
 

Finally, the online test URL is provided. On this webpage, you can select a PNG image file in the list and click the load file button to view the image on the webpage, below the image is the code file read by the image. Http://www.nihilogic.dk/labs/canvascompress/

Link: http://www.cnblogs.com/ilian/archive/2012/06/21/js-to-png.html

Edit recommendations]