From 5f385d490db3ae5b09d3dad13ca7d116de89d964 Mon Sep 17 00:00:00 2001
From: Christoph Oberhofer <christoph@brighterfuture.co>
Date: Tue, 28 Mar 2017 06:21:42 +0200
Subject: [PATCH] Capturing images respecting their orientation

---
 src/input/PixelCapture.js | 51 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 48 insertions(+), 3 deletions(-)

diff --git a/src/input/PixelCapture.js b/src/input/PixelCapture.js
index f2aa4ec..d201bb7 100644
--- a/src/input/PixelCapture.js
+++ b/src/input/PixelCapture.js
@@ -41,6 +41,39 @@ function getOrCreateCanvas(source, target) {
     return $canvas;
 }
 
+function drawImage(
+    canvasSize,
+    ctx,
+    source,
+    type,
+    drawable,
+    ...drawImageArgs,
+) {
+    let drawAngle = 0;
+    if (source.type === 'IMAGE') {
+        if (source.tags && source.tags.orientation) {
+            switch(source.tags.orientation) {
+            case 6:
+                drawAngle = 90 * TO_RADIANS;
+                break;
+            case 8:
+                drawAngle = -90 * TO_RADIANS;
+                break;
+            }
+        }
+    }
+
+    if (drawAngle !== 0) {
+        ctx.translate(canvasSize.width / 2, canvasSize.height / 2);
+        ctx.rotate(drawAngle);
+        ctx.drawImage(drawable, -canvasSize.height / 2, -canvasSize.width / 2, canvasSize.height, canvasSize.width);
+        ctx.rotate(-drawAngle);
+        ctx.translate(-canvasSize.width / 2, -canvasSize.height / 2);
+    } else {
+        ctx.drawImage(drawable, ...drawImageArgs);
+    }
+}
+
 export function fromSource(source, {target = "#interactive.viewport"} = {}) {
     var drawable = source.getDrawable();
     var $canvas = null;
@@ -61,8 +94,6 @@ export function fromSource(source, {target = "#interactive.viewport"} = {}) {
         return new Uint8Array(aquire(bytesRequired));
     }
 
-
-
     return {
         grabFrameData: function grabFrameData({clipping} = {}) {
             const {viewport, canvas: canvasSize} = source.getDimensions();
@@ -87,8 +118,22 @@ export function fromSource(source, {target = "#interactive.viewport"} = {}) {
             if ($canvas.height < 10 || $canvas.width < 10) {
                 return sleep(100).then(grabFrameData);
             }
+
             if (!(drawable instanceof HTMLCanvasElement)) {
-                ctx.drawImage(drawable, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
+                drawImage(
+                    canvasSize,
+                    ctx,
+                    source,
+                    drawable,
+                    sx,
+                    sy,
+                    sWidth,
+                    sHeight,
+                    dx,
+                    dy,
+                    dWidth,
+                    dHeight
+                );
             }
             var imageData = ctx.getImageData(
                 clipping.x,