fix: support tRNS chunk for palette images

Author: targos

img/palette_trns.png

@@ -34,6 +34,7 @@ export default class PNGDecoder extends IOBuffer {
   private _compressionMethod: CompressionMethod;
   private _filterMethod: FilterMethod;
   private _interlaceMethod: InterlaceMethod;
+  private _colorType: number;
 
   public constructor(data: DecoderInputType, options: IPNGDecoderOptions = {}) {
     super(data);
@@ -54,6 +55,7 @@ export default class PNGDecoder extends IOBuffer {
     this._compressionMethod = CompressionMethod.UNKNOWN;
     this._filterMethod = FilterMethod.UNKNOWN;
     this._interlaceMethod = InterlaceMethod.UNKNOWN;
+    this._colorType = -1;
     // PNG is always big endian
     // https://www.w3.org/TR/PNG/#7Integers-and-byte-order
     this.setBigEndian();
@@ -99,6 +101,9 @@ export default class PNGDecoder extends IOBuffer {
         this._end = true;
         break;
       // 11.3 Ancillary chunks
+      case 'tRNS': // 11.3.2.1 tRNS Transparency
+        this.decodetRNS(length);
+        break;
       case 'tEXt': // 11.3.4.3 tEXt Textual data
         this.decodetEXt(length);
         break;
@@ -141,6 +146,7 @@ export default class PNGDecoder extends IOBuffer {
     image.depth = checkBitDepth(this.readUint8());
 
     const colorType: ColorType = this.readUint8();
+    this._colorType = colorType;
     let channels: number;
     switch (colorType) {
       case ColorType.GREYSCALE:
@@ -199,6 +205,26 @@ export default class PNGDecoder extends IOBuffer {
     this.skip(length);
   }
 
+  // https://www.w3.org/TR/PNG/#11tRNS
+  private decodetRNS(length: number): void {
+    // TODO: support other color types.
+    if (this._colorType === 3) {
+      if (length > this._palette.length) {
+        throw new Error(
+          `tRNS chunk contains more alpha values than there are palette colors (${length} vs ${this._palette.length})`,
+        );
+      }
+      let i = 0;
+      for (; i < length; i++) {
+        const alpha = this.readByte();
+        this._palette[i].push(alpha);
+      }
+      for (; i < this._palette.length; i++) {
+        this._palette[i].push(255);
+      }
+    }
+  }
+
   // https://www.w3.org/TR/PNG/#11tEXt
   private decodetEXt(length: number): void {
     let keyword = '';

src/PNGDecoder.ts

@@ -46,6 +46,22 @@ describe('decode', () => {
     expect(img.palette[0]).toStrictEqual([124, 124, 124]);
   });
 
+  it('palette with tRNS', () => {
+    const img = loadAndDecode('palette_trns.png');
+    check(img, {
+      width: 1300,
+      height: 1300,
+      depth: 8,
+      channels: 1,
+    });
+    expect(img.palette).toBeInstanceOf(Array);
+    expect(img.palette).toHaveLength(256);
+    // @ts-ignore
+    expect(img.palette[0]).toStrictEqual([71, 112, 76, 0]);
+    // @ts-ignore
+    expect(img.palette[255]).toStrictEqual([98, 185, 201, 255]);
+  });
+
   it('should not throw when CRC is correct', () => {
     loadAndDecode('palette.png', { checkCrc: true });
   });

src/__tests__/decode.test.ts

@@ -62,4 +62,4 @@ export interface IPNGEncoderOptions {
   zlib?: DeflateFunctionOptions;
 }
 
-export type IndexedColors = [number, number, number][];
+export type IndexedColors = number[][];