Removes exifreader Dependency (#70)

* #34 removes ExifReader
- See https://aws.amazon.com/blogs/machine-learning/how-an-important-change-in-web-standards-impacts-your-image-annotation-jobs/
- Browsers now rotate images based on exif by default

* readme.md update

* updated dist for next release

Co-authored-by: Eric "Danger" Nograles <[email protected]>

Author: ericnograles

README.md

@@ -1,8 +1,10 @@
 # browser-image-resizer
 
+A tiny (~7kb ) browser-based library to downscale and/or resize images using `<canvas>`.
+
 ## Introduction
 
-This library allows for cross-browser image downscaling and resizing utilizing `<canvas>`. The code was part of Ross Turner's [HTML5-ImageUploader](https://github.com/rossturner/HTML5-ImageUploader).  Note that this is meant to be a browser-only utility and will not work in Node.js.
+The code was part of Ross Turner's [HTML5-ImageUploader](https://github.com/rossturner/HTML5-ImageUploader).  Note that this is meant to be a browser-only utility and will not work in Node.js.
 
 ## Demo
 
@@ -35,7 +37,6 @@ const config = {
   quality: 0.5,
   maxWidth: 800,
   maxHeight: 600,
-  autoRotate: true,
   debug: true
 };
 
@@ -104,7 +105,6 @@ const config = {
   quality: 0.5,
   maxWidth: 800,
   maxHeight: 600,
-  autoRotate: true,
   debug: true
 };
 

dist/index.js

@@ -17,8 +17,5 @@
     "build": "NODE_ENV=production webpack --mode=production",
     "dev": "webpack --watch --mode=development"
   },
-  "repository": "https://github.com/ericnograles/browser-image-resizer.git",
-  "dependencies": {
-    "exifreader": "^4.5.1"
-  }
+  "repository": "https://github.com/ericnograles/browser-image-resizer.git"
 }

package-lock.json

@@ -1,4 +1,3 @@
-import ExifReader from 'exifreader';
 import { initializeOrGetImg } from './browser_operations';
 import { scaleImage } from './scaling_operations';
 
@@ -23,31 +22,6 @@ export function readAndCompressImage(file, userConfig) {
       }
       img.onload = function() {
         let scaleImageOptions = { img, config }
-        if (config.autoRotate) {
-          if (config.debug)
-            console.log(
-              'browser-image-resizer: detecting image orientation...'
-            );
-          let Orientation = {};
-          try {
-            const Result = ExifReader.load(file);
-            Orientation = Result.Orientation || {};
-          } catch (err) {
-            console.error('browser-image-resizer: Error getting orientation')
-            console.error(err)
-          }
-          if (config.debug) {
-            console.log(
-              'browser-image-resizer: image orientation from EXIF tag = ' +
-                Orientation
-            );
-          }
-          scaleImageOptions.orientation = Orientation.value
-        } else if (config.debug) {
-            console.log(
-              'browser-image-resizer: ignoring EXIF orientation tag because autoRotate is false...'
-            );
-        }
         try {
           let blob = scaleImage(scaleImageOptions);
           resolve(blob)

package.json

@@ -44,52 +44,6 @@ function findMaxWidth(config, canvas) {
   return mWidth;
 }
 
-function exifApplied(canvas, ctx, orientation, img) {
-  let width = canvas.width;
-  let styleWidth = canvas.style.width;
-  let height = canvas.height;
-  let styleHeight = canvas.style.height;
-  if (orientation > 4) {
-    canvas.width = height;
-    canvas.style.width = styleHeight;
-    canvas.height = width;
-    canvas.style.height = styleWidth;
-  }
-  switch (orientation) {
-    case 2:
-      ctx.translate(width, 0);
-      ctx.scale(-1, 1);
-      break;
-    case 3:
-      ctx.translate(width, height);
-      ctx.rotate(Math.PI);
-      break;
-    case 4:
-      ctx.translate(0, height);
-      ctx.scale(1, -1);
-      break;
-    case 5:
-      ctx.rotate(0.5 * Math.PI);
-      ctx.scale(1, -1);
-      break;
-    case 6:
-      ctx.rotate(0.5 * Math.PI);
-      ctx.translate(0, -height);
-      break;
-    case 7:
-      ctx.rotate(0.5 * Math.PI);
-      ctx.translate(width, -height);
-      ctx.scale(-1, 1);
-      break;
-    case 8:
-      ctx.rotate(-0.5 * Math.PI);
-      ctx.translate(-width, 0);
-      break;
-  }
-  ctx.drawImage(img, 0, 0);
-  ctx.restore();
-}
-
 function scaleCanvasWithAlgorithm(canvas, config) {
   let scaledCanvas = document.createElement('canvas');
 
@@ -217,7 +171,8 @@ export function scaleImage({ img, config, orientation = 1 } = {}) {
   }
 
   // EXIF
-  exifApplied(canvas, ctx, orientation, img);
+  ctx.drawImage(img, 0, 0);
+  ctx.restore();
 
   let maxWidth = findMaxWidth(config, canvas);
 

src/index.js

@@ -9,7 +9,7 @@ export default class App extends Component {
   };
 
   onChange = async event => {
-    let image = await readAndCompressImage(event.target.files[0], { mimeType: 'image/jpeg'});
+    let image = await readAndCompressImage(event.target.files[0], { mimeType: 'image/jpeg', debug: true });
     let base64Image = await this.convertToBase64(image);
     this.setState({ image: base64Image });
   };

src/scaling_operations.js

@@ -25,7 +25,7 @@ export default {
       this.images = images
     },
     async readImageAndConvertToBase64(file) {
-      let image = await readAndCompressImage(file, { mimeType: 'image/jpeg'} );
+      let image = await readAndCompressImage(file, { mimeType: 'image/png', debug: true } );
       let base64Image = await this.convertToBase64(image);
       return base64Image
     },