想不到的将JS文件压缩成PNG图像存储方法

你有没有想过：为了压缩js文件，把js文件转化成PNG图像，然后用 canvas 控件中的 getImageData() 函数将图像再重新读成js文件。我昨天在这里发表的JS文件快速加载的文章中提到了这一方法，有网友对这个做法很感兴趣，于是今天详细解读一下。

创新互联建站是专业的万宁网站建设公司，万宁接单;提供成都做网站、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行万宁网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

这样可以做到很高的压缩比，到底有多高，下面会提到。这种方法用到了 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); 
  
  
  
      $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); 
  
  
  
  } 
  
  
  
  ?>

它读取JS文件并创建一个PNG图像，图像中的每个像素中是一个0-255之间的值，而这个值对应的是JS字符的ascII的值。

当然，除了压缩，还要有解压缩，也就是将图像读取为JS文件的过程。这个函数是用JS写的，可以从下面的位置下载这个文件。

 
 
 
 
  
  
  
  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
  
  
  
  
                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; 
  
  
  
      } 
  
  
  
  }

***给出在线测试地址，在这个网页上，您可以在列表中选择一个PNG图像文件，点击 load file 按钮可以在网页上看到这个图像，在图像的下面是由这个图像所读出来的代码文件。http://www.nihilogic.dk/labs/canvascompress/

网页题目：想不到的将JS文件压缩成PNG图像存储方法
URL标题：http://www.shufengxianlan.com/qtweb/news46/249396.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容