From a54dbc345b8d4cb22fca039b5e42da1c2ad77af8 Mon Sep 17 00:00:00 2001
From: rogerxaic <roger.miret@gmail.com>
Date: Tue, 14 Apr 2020 10:22:54 +0200
Subject: [PATCH] fix images' rotation based on exif data

---
 package-lock.json               |  5 +++++
 package.json                    |  1 +
 src/worker/browser/loadImage.js | 12 ++++++++++--
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e5fd02f..d354967 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1785,6 +1785,11 @@
       "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
       "dev": true
     },
+    "blueimp-load-image": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/blueimp-load-image/-/blueimp-load-image-3.0.0.tgz",
+      "integrity": "sha512-Q9rFbd4ZUNvzSFmRXx9MoG0RwWwJeMjjEUbG7WIOJgUg22Jgkow0wL5b35B6qwiBscxACW9OHdrP5s2vQ3x8DQ=="
+    },
     "bmp-js": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/bmp-js/-/bmp-js-0.1.0.tgz",
diff --git a/package.json b/package.json
index 99d3d2e..aaaa596 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "webpack-dev-middleware": "^3.7.2"
   },
   "dependencies": {
+    "blueimp-load-image": "^3.0.0",
     "bmp-js": "^0.1.0",
     "file-type": "^12.4.1",
     "idb-keyval": "^3.2.0",
diff --git a/src/worker/browser/loadImage.js b/src/worker/browser/loadImage.js
index 675dc2e..8cdc050 100644
--- a/src/worker/browser/loadImage.js
+++ b/src/worker/browser/loadImage.js
@@ -1,4 +1,5 @@
 const resolveURL = require('resolve-url');
+const blueimp = require('blueimp-load-image');
 
 /**
  * readFromBlobOrFile
@@ -20,6 +21,12 @@ const readFromBlobOrFile = blob => (
   })
 );
 
+const fixOrientationFromUrlOrBlobOrFile = blob => (
+  new Promise((resolve) => {
+    blueimp(blob, (img) => img.toBlob(resolve, 'image/jpeg'), {orientation: true})
+  })
+)
+
 /**
  * loadImage
  *
@@ -40,8 +47,8 @@ const loadImage = async (image) => {
         .split('')
         .map(c => c.charCodeAt(0));
     } else {
-      const resp = await fetch(resolveURL(image));
-      data = await resp.arrayBuffer();
+      image = await fixOrientationFromUrlOrBlobOrFile(resolveURL(image));
+      data = await readFromBlobOrFile(image);
     }
   } else if (image instanceof HTMLElement) {
     if (image.tagName === 'IMG') {
@@ -59,6 +66,7 @@ const loadImage = async (image) => {
       });
     }
   } else if (image instanceof File || image instanceof Blob) {
+    image = await fixOrientationFromUrlOrBlobOrFile(image);
     data = await readFromBlobOrFile(image);
   }