EXIF Orientation Support

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### Unreleased
 
+- Add support for EXIF orientation on JPEG images (#626 and #1353)
 - Add support for PDF/A-1b and PDF/A-1a
 
 ### [v0.13.0] - 2021-10-24

docs/images.md

@@ -17,6 +17,7 @@ be scaled according to the following options.
 * `link` - a URL to link this image to (shortcut to create an annotation)
 * `goTo` - go to anchor (shortcut to create an annotation)
 * `destination` - create anchor to this image
+* `obeyOrientation` - (true/false) if the image is a JPEG and has an EXIF orientation it will be properly rotated and/or flipped. Defaults to `false`, unless the similarly named `obeyOrientation` option set to `true` when creating the `PDFDocument` object (e.g. `new PDFDocument({obeyOrientation: true})`)
 
 When a `fit` or `cover` array is provided, PDFKit accepts these additional options:
 

lib/image/jpeg.js

@@ -1,3 +1,5 @@
+import exif from 'jpeg-exif';
+
 const MARKERS = [
   0xffc0,
   0xffc1,
@@ -31,6 +33,9 @@ class JPEG {
       throw 'SOI not found in JPEG';
     }
 
+    // Parse the EXIF orientation
+    this.orientation = exif.fromBuffer(this.data).Orientation || 1;
+
     let pos = 2;
     while (pos < this.data.length) {
       marker = this.data.readUInt16BE(pos);

lib/mixins/images.js

@@ -7,12 +7,15 @@ export default {
   },
 
   image(src, x, y, options = {}) {
-    let bh, bp, bw, image, ip, left, left1;
+    let bh, bp, bw, image, ip, left, left1, rotateAngle, originX, originY;
     if (typeof x === 'object') {
       options = x;
       x = null;
     }
 
+    // Obey orientation based on document options or image options
+    let obeyOrientation = options.obeyOrientation === true || (options.obeyOrientation !== false && this.options.obeyOrientation === true);
+
     x = (left = x != null ? x : options.x) != null ? left : this.x;
     y = (left1 = y != null ? y : options.y) != null ? left1 : this.y;
 
@@ -36,24 +39,31 @@ export default {
       this.page.xobjects[image.label] = image.obj;
     }
 
-    let w = options.width || image.width;
-    let h = options.height || image.height;
+    let { width, height } = image;
+
+    // If EXIF orientation calls for it, swap width and height
+    if (obeyOrientation && image.orientation > 4) {
+      [width, height] = [height, width];
+    }
+
+    let w = options.width || width;
+    let h = options.height || height;
 
     if (options.width && !options.height) {
-      const wp = w / image.width;
-      w = image.width * wp;
-      h = image.height * wp;
+      const wp = w / width;
+      w = width * wp;
+      h = height * wp;
     } else if (options.height && !options.width) {
-      const hp = h / image.height;
-      w = image.width * hp;
-      h = image.height * hp;
+      const hp = h / height;
+      w = width * hp;
+      h = height * hp;
     } else if (options.scale) {
-      w = image.width * options.scale;
-      h = image.height * options.scale;
+      w = width * options.scale;
+      h = height * options.scale;
     } else if (options.fit) {
       [bw, bh] = options.fit;
       bp = bw / bh;
-      ip = image.width / image.height;
+      ip = width / height;
       if (ip > bp) {
         w = bw;
         h = bw / ip;
@@ -64,7 +74,7 @@ export default {
     } else if (options.cover) {
       [bw, bh] = options.cover;
       bp = bw / bh;
-      ip = image.width / image.height;
+      ip = width / height;
       if (ip > bp) {
         h = bh;
         w = bh * ip;
@@ -88,6 +98,91 @@ export default {
       }
     }
 
+    if (obeyOrientation) {
+      switch (image.orientation) {
+        // No orientation (need to flip image, though, because of the default transform matrix on the document)
+        default:
+        case 1:
+          h = -h;
+          y -= h;
+
+          rotateAngle = 0;
+          break;
+        // Flip Horizontal
+        case 2:
+          w = -w;
+          h = -h;
+          x -= w;
+          y -= h;
+
+          rotateAngle = 0;
+          break;
+        // Rotate 180 degrees
+        case 3:
+          originX = x;
+          originY = y;
+
+          h = -h;
+          x -= w;
+
+          rotateAngle = 180;
+          break;
+        // Flip vertical
+        case 4:
+          // Do nothing, image will be flipped
+
+          break;
+        // Flip horizontally and rotate 270 degrees CW
+        case 5:
+          originX = x;
+          originY = y;
+
+          [w, h] = [h, w];
+          y -= h;
+
+          rotateAngle = 90;
+          break;
+        // Rotate 90 degrees CW
+        case 6:
+          originX = x;
+          originY = y;
+
+          [w, h] = [h, w];
+          h = -h;
+
+          rotateAngle = 90;
+          break;
+        // Flip horizontally and rotate 90 degrees CW
+        case 7:
+          originX = x;
+          originY = y;
+
+          [w, h] = [h, w];
+          h = -h;
+          w = -w;
+          x -= w;
+
+          rotateAngle = 90;
+          break;
+        // Rotate 270 degrees CW
+        case 8:
+          originX = x;
+          originY = y;
+
+          [w, h] = [h, w];
+          h = -h;
+          x -= w;
+          y -= h;
+
+          rotateAngle = -90;
+          break;
+      }
+    } else {
+      h = -h;
+      y -= h;
+      rotateAngle = 0;
+    }
+
     // create link annotations if the link option is given
     if (options.link != null) {
       this.link(x, y, w, h, options.link);
@@ -105,7 +200,14 @@ export default {
     }
 
     this.save();
-    this.transform(w, 0, 0, -h, x, y + h);
+
+    if (rotateAngle) {
+        this.rotate(rotateAngle, {
+            origin: [originX, originY]
+        });
+    }
+
+    this.transform(w, 0, 0, h, x, y);
     this.addContent(`/${image.label} Do`);
     this.restore();
 

package.json

@@ -49,6 +49,7 @@
   "dependencies": {
     "crypto-js": "^4.0.0",
     "fontkit": "^1.8.1",
+    "jpeg-exif": "^1.1.4",
     "linebreak": "^1.0.2",
     "png-js": "^1.0.0"
   },
@@ -91,4 +92,4 @@
       "jest-screenshot/reporter"
     ]
   }
-}
+}

rollup.config.js

@@ -11,7 +11,8 @@ const external = [
   'linebreak',
   'png-js',
   'crypto-js',
-  'saslprep'
+  'saslprep',
+  'jpeg-exif',
 ];
 
 export default [