Add support for GIF images

Author: Duncan MacKenzie

lib/image.js

@@ -6,9 +6,10 @@ By Devon Govett
 import fs from 'fs'
 import JPEG from './image/jpeg'
 import PNG from './image/png'
+import GIF from './image/gif'
 
 class PDFImage {
-  static open(src, label) {
+  static open(src, label, options) {
     let data
     if (Buffer.isBuffer(src)) {
       data = src
@@ -27,9 +28,11 @@ class PDFImage {
     }
 
     if (data[0] === 0xff && data[1] === 0xd8) {
-      return new JPEG(data, label)
+      return new JPEG(data, label, options)
     } else if (data[0] === 0x89 && data.toString('ascii', 1, 4) === 'PNG') {
-      return new PNG(data, label)
+      return new PNG(data, label, options)
+    } else if (data[0] === 71 && data[1] === 73 && data[2] === 70) {
+      return new GIF(data, label, options)
     } else {
       throw new Error('Unknown image format.')
     }

lib/image/gif.js

@@ -0,0 +1,51 @@
+import GIFuct from './gifuct-js';
+
+const COLOR_SPACE_MAP = {
+  1: 'DeviceGray',
+  3: 'DeviceRGB',
+  4: 'DeviceCMYK'
+}
+class GIF {
+  constructor(data, label, { width, height } = {}) {
+    this.data = data;
+    this.label = label;
+
+    // validate data integrity
+
+    // assign bits per component to this.bits
+    this.bits = 8;
+
+    // assign image width and height to this.width and this.height
+    this.width = width || 0;
+    this.height = height || 0;
+
+    this.colorSpace = COLOR_SPACE_MAP[3];
+
+    this.obj = null;
+  }
+
+  embed(document) {
+    if (this.obj) { return; }
+
+    const gif = new GIFuct(this.data);
+    const data = gif.getFrame(0, false, false);
+    console.log('Data from GIFuct:', data);
+
+    this.obj = document.ref({
+      Type: 'XObject',
+      Subtype: 'Image',
+      BitsPerComponent: this.bits,
+      Width: this.width,
+      Height: this.height,
+      ColorSpace: this.colorSpace,
+      Filter: data.format === 'lzw' ? 'LZWDecode' : 'FlateDecode',
+    });
+
+    this.obj.end(data);
+
+    // free memory
+    return this.data = null;
+  }
+};
+
+export default GIF;

lib/image/gifuct-js/src/gif.js

@@ -1,8 +1,8 @@
-
+/* eslint-disable */
 // object used to represent array buffer data for a gif file
 
-var DataParser = require('../node_modules/js-binary-schema-parser/src/dataparser');
-var gifSchema = require('./schema');
+import DataParser from '../../js-binary-schema-parser/src/dataparser';
+import gifSchema from './schema';
 
 function GIF(arrayBuffer){
 	// convert to byte array
@@ -25,32 +25,48 @@ function GIF(arrayBuffer){
 // if buildPatch is true, the returned image will be a clamped 8 bit image patch
 // for use directly with a canvas.
 GIF.prototype.decompressFrame = function(index, buildPatch){
+	return this.getFrame(index, buildPatch, true);
+}
+
+// set decompress to false to retrieve the LZW-compressed image data
+GIF.prototype.getFrame = function(index, buildPatch, decompress){
 
 	// make sure a valid frame is requested
 	if(index >= this.raw.frames.length){ return null; }
 
 	var frame = this.raw.frames[index];
-	if(frame.image){
+	if (frame.image) {
+		var isInterlaced = frame.image.descriptor.lct.interlaced;
+
 		// get the number of pixels
 		var totalPixels = frame.image.descriptor.width * frame.image.descriptor.height;
+		var pixels;
 
 		// do lzw decompression
-		var pixels = lzw(frame.image.data.minCodeSize, frame.image.data.blocks, totalPixels);
+		if (decompress !== false || buildPatch || isInterlaced) {
+			pixels = lzw(frame.image.data.minCodeSize, frame.image.data.blocks, totalPixels);
+		}
 
 		// deal with interlacing if necessary
-		if(frame.image.descriptor.lct.interlaced){
+		if (isInterlaced) {
 			pixels = deinterlace(pixels, frame.image.descriptor.width);
 		}
 
+		if (!pixels) {
+			console.log('Returning image data:', frame.image.data.blocks);
+		}
+
 		// setup usable image object
 		var image = {
+			data: !pixels ? frame.image.data.blocks : undefined,
 			pixels: pixels,
 			dims: {
 				top: frame.image.descriptor.top,
 				left: frame.image.descriptor.left,
 				width: frame.image.descriptor.width,
 				height: frame.image.descriptor.height
-			}
+			},
+			format: pixels ? 'raw' : 'lzw'
 		};
 
 		// color table
@@ -80,6 +96,7 @@ GIF.prototype.decompressFrame = function(index, buildPatch){
 
 	// frame does not contains image
 	return null;
+};
 
 
 	/**
@@ -230,7 +247,6 @@ GIF.prototype.decompressFrame = function(index, buildPatch){
 
 		return patchData;
 	}
-};
 
 // returns all frames decompressed
 GIF.prototype.decompressFrames = function(buildPatch){
@@ -244,4 +260,4 @@ GIF.prototype.decompressFrames = function(buildPatch){
 	return frames;
 };
 
-module.exports = GIF;
+export default GIF;

lib/image/gifuct-js/src/schema.js

@@ -1,9 +1,9 @@
-
+/* eslint-disable */
 // Schema for the js file parser to use to parse gif files
 // For js object convenience (re-use), the schema objects are approximately reverse ordered
 
 // common parsers available
-var Parsers = require('../node_modules/js-binary-schema-parser/src/parsers');
+import Parsers from '../../js-binary-schema-parser/src/parsers';
 
 // a set of 0x00 terminated subblocks
 var subBlocks = {
@@ -202,4 +202,4 @@ var schemaGIF = [
 	frames // content frames
 ];
 
-module.exports = schemaGIF;
+export default schemaGIF;

lib/image/js-binary-schema-parser/src/bytestream.js

@@ -55,4 +55,4 @@ ByteStream.prototype.readUnsigned = function(littleEndian){
 	}	
 };
 
-module.exports = ByteStream;
+export default ByteStream;

lib/image/js-binary-schema-parser/src/dataparser.js

@@ -1,7 +1,7 @@
 
 // Primary data parsing object used to parse byte arrays
 
-var ByteStream = require('./bytestream');
+import ByteStream from './bytestream';
 
 function DataParser(data){
 	this.stream = new ByteStream(data);
@@ -79,4 +79,4 @@ DataParser.prototype.parseBits = function(details){
 	return out;
 };
 
-module.exports = DataParser;
+export default DataParser;

lib/image/js-binary-schema-parser/src/parsers.js

@@ -39,4 +39,4 @@ var Parsers = {
 	}
 };
 
-module.exports = Parsers;
+export default Parsers;

lib/mixins/images.js

@@ -25,7 +25,7 @@ export default {
       if (src.width && src.height) {
         image = src;
       } else {
-        image = this.openImage(src);
+        image = this.openImage(src, { width: options.width, height: options.height });
       }
     }
 
@@ -102,14 +102,14 @@ export default {
     return this;
   },
 
-  openImage(src) {
+  openImage(src, options) {
     let image;
     if (typeof src === 'string') {
       image = this._imageRegistry[src];
     }
 
     if (!image) {
-      image = PDFImage.open(src, `I${++this._imageCount}`);
+      image = PDFImage.open(src, `I${++this._imageCount}`, options);
       if (typeof src === 'string') {
         this._imageRegistry[src] = image;
       }

package.json

@@ -49,20 +49,20 @@
     "rollup": "^0.52.2",
     "rollup-plugin-babel": "3",
     "rollup-plugin-bundle-size": "https://github.com/vimeo/rollup-plugin-bundle-size",
+    "rollup-plugin-cpy": "^1.0.0",
     "rollup-plugin-ignore": "^1.0.3",
     "rollup-plugin-json": "^2.1.0",
     "rollup-plugin-node-resolve": "^2.0.0",
     "rollup-plugin-replace": "^1.1.1",
     "rollup-plugin-string": "^2.0.2",
-    "rollup-plugin-uglify": "^3.0.0",
-    "rollup-plugin-cpy": "^1.0.0"
+    "rollup-plugin-uglify": "^3.0.0"
   },
   "dependencies": {
     "@react-pdf/fontkit": "^1.11.0",
     "@react-pdf/png-js": "^1.0.0",
-    "lz-string": "^1.4.4",
     "crypto-js": "^3.1.9-1",
     "linebreak": "^0.3.0",
+    "lz-string": "^1.4.4",
     "saslprep": "1.0.1"
   },
   "jest": {