Render GIF images

index.d.ts

@@ -93,7 +93,7 @@ declare module '@react-pdf/renderer' {
 
     type SourceObject =
       | string
-      | { data: Buffer; format: 'png' | 'jpg' }
+      | { data: Buffer; format: 'png' | 'jpg' | 'gif' }
       | { uri: string; method: HTTPMethod; body: any; headers: any };
 
     interface BaseImageProps extends NodeProps {
@@ -114,8 +114,8 @@ declare module '@react-pdf/renderer' {
     type ImageProps = ImageWithSrcProp | ImageWithSourceProp;
 
     /**
-     * A React component for displaying network or local (Node only) JPG or
-     * PNG images, as well as base64 encoded image strings.
+     * A React component for displaying network or local (Node only) JPG,
+     * PNG or GIF images, as well as base64 encoded image strings.
      */
     class Image extends React.Component<ImageProps> {}
 

package.json

@@ -33,10 +33,12 @@
     "@textkit/pdf-renderer": "^0.1.13",
     "@textkit/text-decoration-engine": "^0.1.10",
     "blob-stream": "^0.1.3",
+    "blob-to-buffer": "^1.2.8",
     "cross-fetch": "^3.0.1",
     "emoji-regex": "^7.0.3",
     "hyphen": "^1.1.1",
     "is-url": "^1.2.4",
+    "jpegasus": "^1.9.54",
     "lodash.groupby": "^4.6.0",
     "lodash.isfunction": "^3.0.9",
     "lodash.merge": "^4.6.1",
@@ -46,6 +48,8 @@
     "page-wrapping": "^1.1.0",
     "react": "^16.8.3",
     "react-reconciler": "^0.20.1",
+    "sharp": "^0.22.0",
+    "to-arraybuffer": "^1.0.1",
     "yoga-layout-prebuilt": "^1.9.3"
   },
   "devDependencies": {

src/utils/gif.js

@@ -0,0 +1,69 @@
+/* global File */
+
+import jpegasus from 'jpegasus';
+import toArrayBuffer from 'to-arraybuffer';
+import toBufferCb from 'blob-to-buffer';
+import sharp from 'sharp';
+import JPEG from './jpeg';
+import PNG from './png';
+
+const toBuffer = blob =>
+  new Promise((resolve, reject) =>
+    toBufferCb(blob, (err, buffer) => (err ? reject(err) : resolve(buffer))),
+  );
+
+const renderGIF = async data => {
+  if (!GIF.isValid(data)) {
+    throw new TypeError(
+      'Image passed to GIF decoder appears not to be in GIF format',
+    );
+  }
+
+  if (!BROWSER) {
+    const pngBuffer = await sharp(data).toBuffer();
+    return new PNG(pngBuffer);
+  }
+
+  const jpegBlob = await jpegasus.compress(
+    new File([toArrayBuffer(data)], 'image.gif', {
+      type: 'image/gif',
+    }),
+    {
+      quality: 0.8,
+    },
+  );
+  const jpegBuffer = await toBuffer(jpegBlob);
+  return new JPEG(jpegBuffer);
+};
+
+// Instantiate a “thenable” object — an object that behaves like a Promise
+// https://samdanielson.com/blog/2016/09/15/subclassing-promises-not.html
+// by implementing the Promise prototype’s public methods, and applying them to a real Promise
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#Promise_prototype
+class GIF {
+  constructor(data) {
+    this.imagePromise = renderGIF(data);
+  }
+
+  then(...args) {
+    return this.imagePromise.then.apply(this.imagePromise, args);
+  }
+
+  catch(...args) {
+    return this.imagePromise.catch.apply(this.imagePromise, args);
+  }
+
+  finally(...args) {
+    return this.imagePromise.finally.apply(this.imagePromise, args);
+  }
+}
+
+GIF.isValid = function(data) {
+  try {
+    return data[0] === 71 && data[1] === 73 && data[2] === 70;
+  } catch (e) {
+    return false;
+  }
+};
+
+export default GIF;

src/utils/image.js

@@ -5,6 +5,7 @@ import fetch from 'cross-fetch';
 
 import PNG from './png';
 import JPEG from './jpeg';
+import GIF from './gif';
 import createCache from './cache';
 
 export const IMAGE_CACHE = createCache({ limit: 30 });
@@ -74,7 +75,9 @@ const fetchRemoteFile = async (uri, options) => {
 
 const isValidFormat = format => {
   const lower = format.toLowerCase();
-  return lower === 'jpg' || lower === 'jpeg' || lower === 'png';
+  return (
+    lower === 'jpg' || lower === 'jpeg' || lower === 'png' || lower === 'gif'
+  );
 };
 
 const guessFormat = buffer => {
@@ -84,13 +87,15 @@ const guessFormat = buffer => {
     format = 'jpg';
   } else if (PNG.isValid(buffer)) {
     format = 'png';
+  } else if (GIF.isValid(buffer)) {
+    format = 'gif';
   }
 
   return format;
 };
 
 const isCompatibleBase64 = ({ uri }) =>
-  /^data:image\/[a-zA-Z]*;base64,[^"]*/g.test(uri);
+  /^data:image\/[a-zA-Z]*;base64,[^"]*/.test(uri);
 
 function getImage(body, extension) {
   switch (extension.toLowerCase()) {
@@ -99,38 +104,36 @@ function getImage(body, extension) {
       return new JPEG(body);
     case 'png':
       return new PNG(body);
+    case 'gif':
+      return new GIF(body);
     default:
       return null;
   }
 }
 
-const resolveBase64Image = ({ uri }) => {
-  const match = /^data:image\/([a-zA-Z]*);base64,([^"]*)/g.exec(uri);
-  const format = match[1];
-  const data = match[2];
+const resolveBase64Image = async ({ uri }) => {
+  const [, format, data] = /^data:image\/([a-zA-Z]*);base64,([^"]*)/.exec(uri);
 
   if (!isValidFormat(format)) {
     throw new Error(`Base64 image invalid format: ${format}`);
   }
 
-  return new Promise(resolve => {
-    return resolve(getImage(Buffer.from(data, 'base64'), format));
-  });
+  return getImage(Buffer.from(data, 'base64'), format);
 };
 
-const resolveImageFromData = src => {
+const resolveImageFromData = async src => {
   if (src.data && src.format) {
-    return new Promise(resolve => resolve(getImage(src.data, src.format)));
+    return getImage(src.data, src.format);
   }
 
   throw new Error(`Invalid data given for local file: ${JSON.stringify(src)}`);
 };
 
-const resolveBufferImage = buffer => {
+const resolveBufferImage = async buffer => {
   const format = guessFormat(buffer);
 
   if (format) {
-    return new Promise(resolve => resolve(getImage(buffer, format)));
+    return getImage(buffer, format);
   }
 };
 
@@ -147,11 +150,16 @@ const getImageFormat = body => {
 
   const isJpg = body[0] === 255 && body[1] === 216 && body[2] === 255;
 
+  // based on https://github.com/sindresorhus/file-type/blob/master/index.js#L65
+  const isGif = body[0] === 71 && body[1] === 73 && body[2] === 70;
+
   let extension = '';
   if (isPng) {
     extension = 'png';
   } else if (isJpg) {
     extension = 'jpg';
+  } else if (isGif) {
+    extension = 'gif';
   } else {
     throw new Error('Not valid image extension');
   }

tests/gif.test.js

@@ -0,0 +1,24 @@
+import fs from 'fs';
+import path from 'path';
+import GIF from '../src/utils/gif';
+
+const localGIFImage = fs.readFileSync(path.join(__dirname, 'assets/test.gif'));
+const localPNGImage = fs.readFileSync(path.join(__dirname, 'assets/test.png'));
+
+describe('gif', () => {
+  test('should return true for valid gif images', () => {
+    expect(GIF.isValid(localGIFImage)).toBeTruthy();
+  });
+
+  test('should return false for non gif images', () => {
+    expect(GIF.isValid(localPNGImage)).toBeFalsy();
+  });
+
+  test('should return false for empty argument', () => {
+    expect(GIF.isValid()).toBeFalsy();
+  });
+
+  test('should return false for non buffer argument', () => {
+    expect(GIF.isValid('some data')).toBeFalsy();
+  });
+});

tests/image.test.js

@@ -16,8 +16,10 @@ let dummyRoot;
 
 const jpgImageUrl = 'https://react-pdf.org/static/images/quijote1.jpg';
 const pngImageUrl = 'https://react-pdf.org/static/images/quijote2.png';
+const gifImageUrl = 'https://react-pdf.org/static/images/quijote3.gif';
 const localJPGImage = fs.readFileSync(path.join(__dirname, 'assets/test.jpg'));
 const localPNGImage = fs.readFileSync(path.join(__dirname, 'assets/test.png'));
+const localGIFImage = fs.readFileSync(path.join(__dirname, 'assets/test.gif'));
 
 jest.mock('../src/utils/warning');
 
@@ -141,6 +143,19 @@ describe('Image', () => {
     expect(dummyRoot.instance.image.mock.calls[0][0]).toBe(image.image.data);
   });
 
+  test('Should render a gif image over http', async () => {
+    fetch.once(localGIFImage);
+
+    const image = new Image(dummyRoot, { src: gifImageUrl });
+
+    await image.fetch();
+    await image.render();
+
+    expect(image.image.data).toBeTruthy();
+    expect(dummyRoot.instance.image.mock.calls).toHaveLength(1);
+    expect(dummyRoot.instance.image.mock.calls[0][0]).toBe(image.image.data);
+  });
+
   test('Should render a remote image from src object', async () => {
     fetch.once(localJPGImage);
 
@@ -254,6 +269,17 @@ describe('Image', () => {
     expect(dummyRoot.instance.image.mock.calls[0][0]).toBe(image.image.data);
   });
 
+  /* test('Should render a buffer gif image', async () => {
+    const image = new Image(dummyRoot, { src: localGIFImage });
+
+    await image.fetch();
+    await image.render();
+
+    expect(image.image.data).toBeTruthy();
+    expect(dummyRoot.instance.image.mock.calls).toHaveLength(1);
+    expect(dummyRoot.instance.image.mock.calls[0][0]).toBe(image.image.data);
+  }); */
+
   test('Should correctly resolve objectFit styles given a flat `style` prop', async () => {
     const resolveObjectFitSpy = jest.spyOn(objectFit, 'resolveObjectFit');
     resolveObjectFitSpy.mockClear();