fix images' rotation based on exif data

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",

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",

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);
   }