本篇内容介绍了“将文件压缩成PNG图像存储方法是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

创新互联是一家网站设计公司，集创意、互联网应用、软件技术为一体的创意网站建设服务商，主营产品：成都响应式网站建设公司、品牌网站设计、全网整合营销推广。我们专注企业品牌在网站中的整体树立，网络互动的体验，以及在手机等移动端的优质呈现。成都做网站、成都网站建设、成都外贸网站建设、移动互联产品、网络运营、VI设计、云产品.运维为核心业务。为用户提供一站式解决方案，我们深知市场的竞争激烈，认真对待每位客户，为客户提供赏析悦目的作品，网站的价值服务。

这样可以做到很高的压缩比，到底有多高，下面会提到。这种方法用到了 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写的压缩文件地址。

它读取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 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图像存储方法是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！

分享名称：将文件压缩成PNG图像存储方法是什么
标题链接：http://scyanting.com/article/jhjooi.html