This article was originally published at: github.com/bigo-fronte… Welcome to follow and reprint.
causes
The design sister of the company suddenly came to me and told me that the transparent area of a photo compositing tool I made had turned black.
The first idea is that there is a problem with background initialization that causes the transparent area to blacken. However, the transparent area of the image is normally generated by selecting the Canvas element in the browser to download the image. That is, there is a problem between the drawing completion and the download step. Retrieve the entire step, and then draw it to complete the download process
- Convert the canvas into a blob object
- Call the compression library to compress the BLOb object
- Writes the BLOB object locally
Selecting the Canvas element in the browser to download is similar to the procedure 1 and 3, so the problem should be the black background caused by the operation of the bloB object compression in procedure 2. The library used for compression is image-conversion, where the core code for compression is
PNG image compression
So how to preserve transparent image compression, first understand the basics of PNG images.
PNG (Portable Network Graphic Format) is a bitmap file storage Format. Png8, PNG24, pNG32 PNG itself is a data compression file, which is composed of many types of data blocks, divided into two types: key data blocks and auxiliary data blocks. The content of the image focuses on the key data blocks, and the data types are as follows:
| Block symbol | Data block name | Many data blocks | Position limits |
|---|---|---|---|
| IHDR | File header data block | no | The first block |
| PLTE | Palette data block | no | Before the IDAT |
| IDAT | Image data block | is | Continuous with other IDAts |
| IEND | End of image data | no | The last block of data |
Each data block consists of the following four fields:
| The name of the | The number of bytes | instructions |
|---|---|---|
| Length (Length) | 4 bytes | Specifies the length of a data field in a data block byte |
| Chunk Type Code | 4 bytes | The data block type code consists of ASCII letters (A-Z and A-Z) |
| Chunk Data(Actual content of Data blocks | Variable length | Stores data specified by Chunk Type Code |
| CRC(Cyclic redundancy Detection) | 4 bytes | Stores cyclic redundancy codes used to detect errors |
IHDR stores the basic information of the image and is fixed in size of 25 bytes. IEND indicates that the PNG file or data stream has ended and must be placed at the end of the file, which is also fixed in size of 12 bytes. PLTE stores the palette information that defines the image information, including 1 to 256 palette information, each palette information is composed of 3 bytes, the maximum number of bytes contained is 780. IDAT stores the real data of images. There are multiple data blocks in the data stream, so if you want to compress PNG images, you have to start with IDAT. IDAT has multiple data blocks. The compressed content consists of all data blocks and is filtered first.
The main reason for image data filtering is that in most cases, the color values of the adjacent pixels of the image are very similar, and it is easy to show linear changes (the values of adjacent data are similar or have some regular changes). This feature is used to compress the data of the picture to a certain extent, and the method used is mainly differential encoding (for digital data stream, except the first element, each element is represented as the difference encoding of each element and its previous element). There are five types of PNG filtering:
None: indicates that no filtering is performed.
Sub(X-a): Records the difference between the current pixel and the first pixel on the left, which is the standard value.
Up(x-b): records the difference between the current pixel and the upper pixel. The value of the first pixel is the standard value.
Average(X – (A+B)/2): Record the difference between the current pixel and the Average value of the left pixel and the upper pixel. The first line is processed in Sub mode.
Paeth(X-PR): The record code is as follows
After the image data is filtered, there will be a lot of repeated data. Deflate compression of the processed data will get the chunk data of all IDAT data blocks.
IDAT itself is a kind of compressed data, so how to ensure the presentation effect of the picture at the same time to compress the picture? At present, there are two main compression methods: lossy compression and lossless compression
-
Lossy compression: The current mainstream PNG image refers to PNG24, which can display 2^24 colors. The colors are richer than PNG8, with higher resolution and quality, but the image size is also larger. Png8 can display up to 2^8 colors, with alpha transparent channel, suitable for single color images, image size is also small. Lossy compression converts images from PNG24 format to PNG8 format. Currently, the commonly used method is to use the Product Quantization algorithm to merge the similar colors and compress PNG24 into PNG8. The existing libraries include Tinypng, PNGQuant, ImageAlpha, and PNGNQ.
-
Lossless compression: It mainly processes IDAT’s chunk data and adopts DEFLATE algorithm based on LZ/Huffman to reduce IDAT’s chunk data so as to achieve no compression. Generally, the compression rate of lossy compression is much higher than lossless compression.
The solution
The generated picture is mainly used for banner, start page correlation, color requirements are low, so the lossy compression is used for compression, with the help oftinypngProvide API interface for compression, successfully complete the design of little sister requirements
Welcome everyone to leave a message to discuss, wish smooth work, happy life!
I’m bigO front. See you next time.