Merge pull request foliojs#893 from blikblum/fix-16bit-alpha

Fix 16bit png files with alpha channel

Author: blikblum

lib/image/png.js

@@ -15,16 +15,18 @@ class PNGImage {
     this.document = document;
     if (this.obj) { return; }
 
+    const hasAlphaChannel = this.image.hasAlphaChannel;
+
     this.obj = this.document.ref({
       Type: 'XObject',
       Subtype: 'Image',
-      BitsPerComponent: this.image.bits,
+      BitsPerComponent: hasAlphaChannel ? 8 : this.image.bits,
       Width: this.width,
       Height: this.height,
       Filter: 'FlateDecode'
     });
 
-    if (!this.image.hasAlphaChannel) {
+    if (!hasAlphaChannel) {
       const params = this.document.ref({
         Predictor: 15,
         Colors: this.image.colors,
@@ -71,7 +73,7 @@ class PNGImage {
       // in the PLTE and tRNS sections. See below for details on SMasks.
       return this.loadIndexedAlphaChannel();
 
-    } else if (this.image.hasAlphaChannel) {
+    } else if (hasAlphaChannel) {
       // For PNG color types 4 and 6, the transparency data is stored as a alpha
       // channel mixed in with the main image data. Separate this data out into an
       // SMask object and store it separately in the PDF.
@@ -110,18 +112,21 @@ class PNGImage {
     return this.image.decodePixels(pixels => {
       let a, p;
       const colorCount = this.image.colors;
-      const colorByteSize = (colorCount * this.image.bits) / 8;
       const pixelCount = this.width * this.height;
-      const imgData = new Buffer(pixelCount * colorByteSize);
-      const alphaChannel = new Buffer(pixelCount);
+      const imgData = new Buffer(pixelCount * colorCount);
+      const alphaChannel = new Buffer(pixelCount);      
 
       let i = p = a = 0;
       const len = pixels.length;
+      // For 16bit images copy only most significant byte (MSB) - PNG data is always stored in network byte order (MSB first)
+      const skipByteCount = this.image.bits === 16 ? 1 : 0;
       while (i < len) {
         for (let colorIndex = 0; colorIndex < colorCount; colorIndex++) {
           imgData[p++] = pixels[i++];
+          i += skipByteCount;
         }
         alphaChannel[a++] = pixels[i++];
+        i += skipByteCount;
       }
 
       this.imgData = zlib.deflateSync(imgData);

tests/images/straight.png

@@ -91,7 +91,7 @@ describe("PNGImage", () => {
     });
   });  
 
-  test("RGB with Alpha", () => {
+  test("RGB (8bit) with Alpha", () => {
     // ImageWidth = 409
     // ImageHeight = 400
     // BitDepth = 8
@@ -130,6 +130,45 @@ describe("PNGImage", () => {
     });
   });
 
+  test("RGB (16bit) with Alpha", () => {
+    // ImageWidth = 175
+    // ImageHeight = 65
+    // BitDepth = 16
+    // ColorType = 6
+    // Compression = 0
+    // Filter = 0
+    // Interlace = 0
+
+    const img = createImage("./tests/images/straight.png");
+
+    expect(img.obj.data).toMatchObject({
+      BitsPerComponent: 8,
+      ColorSpace: "DeviceRGB",
+      Filter: "FlateDecode",
+      Height: 65,
+      Length: 28537,
+      Subtype: "Image",
+      Type: "XObject",
+      Width: 175,
+      SMask: expect.any(PDFReference)
+    });
+
+    expect(img.obj.data.SMask.data).toMatchObject({
+      BitsPerComponent: 8,
+      ColorSpace: "DeviceGray",
+      Decode: [
+        0,
+        1
+      ],
+      Filter: "FlateDecode",
+      Height: 65,
+      Length: 16,
+      Subtype: "Image",
+      Type: "XObject",
+      Width: 175,
+    });
+  });  
+
   test("Pallete", () => {
     // ImageWidth = 980
     // ImageHeight = 540