仓库源文，站点原文

layout: post title: Decoding A PNG Image with JavaScript Step by Step

tags: [image, png, javascript, decode, decoder, parser, parse]

Decode a PNG means to convert an image from binary data to ImageData with pixels.

Image binary data can be retrieved from <canvas>, <img>, Object URLs, Image URLs, Blob. See Comprehensive Image Processing on Browsers for details.

ImageData is an object with pixel data, width and height.

Example Image

👆This is the example image. It's too small. Let me enlarge it for you.👇

<img src="/assets/2019-11-07-decode-a-png-image-with-javascript/pixels-large.png" width="100px">

Raw Binary Data

Let's read raw image binary data from <input>.

<input type="file" />
<script>
  const input = document.querySelector('input');
  input.addEventListener('change', async function(e) {
    const [file] = e.target.files;
    const arrayBuffer = await file.arrayBuffer();
    console.log('arrayBuffer', arrayBuffer);
    // TODO: Let's decode arrayBuffer
    const imageData = decode(arrayBuffer);
    console.log('imageData', imageData);
  });
</script>

The output arrayBuffer is:

Each table cell contains 4 bytes. 1 byte contains 8 bits. 1 bit is a binary value 0 or 1.

PNG Signature

A PNG image should starts with 8 bytes: 0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a.

0x means 16-bit value. 0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a to 10-bit value is 137, 80, 78, 71, 13, 10, 26, 10.

This image satisfies the requirement.

Chunks

Chunks contain image data. A chunk contains chunk begin, chunk data and chunk end.

A chunk begins with 2 32-bit value. The first is chunk length, and the other is chunk type.

Let's begin with a chunk.

Chunk Begin 1

This chunk is IHDR with 13 bytes.

Chunk Data 1 IHDR

IHDR values are listed below.

• width and height means image width and height.
• depth represents how many bits contains in a channel. A image composed of pixels, and a pixel composed of channels, and a channel composed of bits.
• colorType. There are 5 color types, 0 is greyscale, 2 is RGB triple, 3 is palette, 4 is greyscale and alpha, 6 is RGB triple and alpha. The palette color type supports 1 channel per pixel.
• compression represents the compression method. Only 0 is supported currently. 0 represents deflate/inflate. Deflate/inflate is a lossless compression method that uses a combination of LZ77 and Huffman coding. It is used widely in 7-zip, zlib, gzip.
• filter represents the filter method used before compression. Only 0 is supported currently. Filter method 0 has 5 filter functions. We will talk about it later.
• interlace represents if the image is loaded interlaced. 0 means without interlaced. 1 means with interlaced.

This image is 2 * 2 pixels, has palette color type, 1 channel per pixel and 2 bit per channel. The compression method is deflate/inflate. The filter method is 0. And the image is without interlaced.

Chunk End 1

Chunk end contains 4 bytes of CRC32 checksum. The decoder should calculate the checksum of the chunk type and the chunk data for each chunk. The calculated checksum should equals the chunk end.

Chunk Begin 2

This chunk is sRGB and has 1 byte chunk data.

Notice that sRGB starts with lowercase letter s. This means that this chunk is ancillary. Otherwise the chunk is critical like the previous one IHDR.

Chunk Data 2 sRGB

The sRGB chunk value represents the color space of the image.

• 0 for perceptual, like photographs.
• 1 for relative colorimetric, like icons.
• 2 for sturation, like graphs and charts.
• 3 for absolute colorimetric, to show the absolute color of an image.

Chunk End 2

Check CRC32.

Chunk Begin 3

9 bytes pHYs ancillary chunk.

Chunk Data 3 pHYs

pHYs chunk represents the physical size of the image. As we can see from the table above, the image is 2835 pixels per metre in width 2835 pixels per metre in height.

Chunk End 3

Check CRC32.

Chunk Begin 4

12 bytes PLTE critical chunk.

Chunk Data 4 PLTE

The palette is RGB triple, so the data is decoded as following:

Palette

[[255, 0, 0], [0, 255, 0], [0, 0, 255], [255, 255, 255]]

Chunk End 4

Check CRC32.

Chunk Begin 5

4 bytes tRNS ancillary chunk.

Chunk Data 5 tRNS

The chunk supplies the alpha value for the palette. So the palette transforms to:

Palette

[[255, 0, 0, 255], [0, 255, 0, 255], [0, 0, 255, 255], [255, 255, 255, 127]]

Chunk End 5

Check CRC32.

Chunk Begin 6

12 bytes IDAT critical chunk.

Chunk Data 6 IDAT

The compression method is applied to the IDAT chunk when encoding. So we decode it with zlib.inflate(). We can use the library pako to decode.

The decoded data is an Uint8Array: 0, 16, 0, 176. We will need more information to decode it.

We will learn about the scanline, a little about the filter, and the logic to bits per pixel.

Scanline Introduction

A scanline is a row of pixels of an image. If the image height is 2, the IDAT chunk contains 2 scanlines.

A scanline composed of 1 byte filter function type and pixel data. The pixel data is appended directly to the previous pixel data without any extra space. The scanline should be filled to match 1 byte if the rightmost bit is empty.

We need to know the bits per pixel to get the length of each scanline.

ColorType - Channel - Depth - Bits per pixel

The color type 3 represents that 1 channel data per pixel. The image depth is 2. So we know that the data contains 2 bits per pixel.

So the scanline decoded is:

Scanline Bits

Filter functions

The filter functions are applied to the pixel data before compression to make the compression more efficient.

In filter method 0, there are 5 filter functions:

The filter function use A, B, C to predicte X.

The filter function 0 means the data is original value. So we can decode previous scanline bits to scanline pixel indexes.

Scanline Pixel Indexes

With previouly decoded pallette [[255, 0, 0, 255], [0, 255, 0, 255], [0, 0, 255, 255], [255, 255, 255, 127]].

Scanline Pixels

Chunk End 6

Check CRC32.

Chunk Begin 7

0 byte IEND critical chunk.

Chunk Data 7 IEND

No data.

Chunk End 7

Check CRC32.

So the output ImageData is:

ImageData

imageData = {
  width: 2,
  height: 2,
  data: [255, 0, 0, 255, 0, 255, 0, 255, 0, 0, 255, 255, 255, 255, 255, 127],
};

Conclusion

We have successfully decoded the PNG image from raw binary data to ImageData. But we have ignored a lot side logics and details. Some are listed below:

• IDAT chunk can be split into multiple chunks. So when we should wait till we meet IEND chunk before we decode the IDAT chunk.
• There are 4 kinds of critical chunk and 14 kinds of ancillary chunk. See Summary of standard chunks in PNG Specification.
• Interlacd PNG are encoded in a way that the users feel the the image is loaded faster. But it gives the larger IDAT chunks.

You can get the source code on GitHub.

Reference

• Source Code
• PNG Specification
• JavaScript PNG 图片编码和解码