Storage Method for compressing JS files into PNG Images

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 124K (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. The following is a method for compressing Files written in PHP:

<?php$filename="http://www.phpernote.com/js/jquery.min.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. The Code is as follows:

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<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/

Articles you may be interested in

• Linux chmod (file or folder permission setting) command parameters and Usage Details
• Php implements batch file compression, packaging, and downloading
• Php uses the ZipArchive function to compress and decompress files.
• Solution to Smarty temporary file creation failure
• Php methods to determine whether a remote file exists
• Php obtains all the files in the directory and saves the results to the array program.
• JS obtains the key code, how Js shields users' keys, and Js obtains the ASII code corresponding to users' keys (compatible with all browsers)
• Js address bar special effects (display the size of all images with links on the page and view the height of the current browser)