Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what is the storage method of compressing files into PNG images?". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In this way, a very high compression ratio can be achieved, and how high it is will be mentioned below. This approach uses the canvas control, which means that it is only valid in browsers that support canvas controls.

Now you can see that the above image is similar to a noisy image, but it is actually a 30K 8-bit PNG image converted from 124K prototype framework code (pretty good compression ratio).

In fact, to convert the code to image format storage, you can convert to GIF and PNG format. The PNG format image has 24 bits and 8 bits. Using 24-bit RGB images, each pixel can store 3 bytes of data. If 8-bit RGB images are used, each pixel can store 1 byte of data.

After testing in PHOTOSHOP, it is found that an 8-bit solid-color image of 300x100 can be compressed to 5K, while the same 24-bit image of 100x100 can only be compressed to 20K. If it is an 8-bit GIF image with the same pattern, the compression effect is worse than that of PNG. Therefore, we choose 8-bit PNG image as the compression and decompression storage format.

Now, we need to start compressing the image. Here is the address of the compressed file written in PHP.

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

Of course, in addition to compression, there is also decompression, that is, the process of reading the image into 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. Data; var a = []; var len = oData.length; var p =-1; for (var iWidth0) 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;}} "what is the storage method of compressing files into PNG images" is introduced here, thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.