browser-image-resizer - npm Package Compare versions

Comparing version 1.0.5 to 1.1.0

package.json

 {
   "name": "browser-image-resizer",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "A browser-based utility to downscale and resize images using <canvas>",
@@ -16,3 +16,4 @@ "main": "build/index.js",
   },
-  "repository": "https://github.com/ericnograles/browser-image-resizer.git"
+  "repository": "https://github.com/ericnograles/browser-image-resizer.git",
+  "dependencies": {}
 }

src/index.js

@@ -0,11 +1,16 @@
+import EXIF from './exif';
+
 const DEFAULT_CONFIG = {
   quality: 0.5,
   maxWidth: 800,
-  maxHeight: 600
+  maxHeight: 600,
+  autoRotate: true,
+  debug: true
 };
 
-export default function readAndCompressImage(file, config = DEFAULT_CONFIG) {
+export default function readAndCompressImage(file, userConfig) {
   return new Promise(resolve => {
     var img = document.createElement('img');
     var reader = new FileReader();
+    var config = Object.assign({}, DEFAULT_CONFIG, userConfig);
 
@@ -15,4 +20,28 @@ reader.onload = function(e) {
       img.onload = function() {
-        //Rotate image first if required
-        resolve(scaleImage(img, config));
+        if (config.autoRotate) {
+          if (config.debug)
+            console.log('browser-image-resizer: detecting image orientation...');
+          if (
+            typeof EXIF.getData === 'function' &&
+            typeof EXIF.getTag === 'function'
+          ) {
+            debugger;
+            EXIF.getData(img, function() {
+              debugger;
+              var orientation = EXIF.getTag(this, 'Orientation');
+              if (config.debug) {
+                console.log(
+                  'browser-image-resizer: image orientation from EXIF tag = ' +
+                    orientation
+                );
+              }
+              resolve(scaleImage(img, config, orientation));
+            });
+          } else {
+            console.error(
+              "browser-image-resizer: can't read EXIF data, the Exif.js library not found"
+            );
+            resolve (scaleImage(img, config));
+          }
+        }
       };
@@ -25,19 +54,115 @@ };
 
-export function scaleImage(img, config) {
+export function scaleImage(img, config, orientation = 1) {
   var canvas = document.createElement('canvas');
   canvas.width = img.width;
   canvas.height = img.height;
-  canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
+  var ctx = canvas.getContext('2d');
+  ctx.save();
 
-  while (canvas.width >= 2 * config.maxWidth) {
+  // EXIF
+  exifApplied(canvas, ctx, orientation, img);
+
+  let maxWidth = findMaxWidth(config, canvas);
+
+  while (canvas.width >= 2 * maxWidth) {
     canvas = getHalfScaleCanvas(canvas);
   }
 
-  if (canvas.width > config.maxWidth) {
+  if (canvas.width > maxWidth) {
     canvas = scaleCanvasWithAlgorithm(canvas, config);
   }
 
-  return dataURIToBlob(canvas.toDataURL('image/jpeg', config.quality));
+  let imageData = canvas.toDataURL('image/jpeg', config.quality);
+  if (typeof config.onScale === 'function') config.onScale(imageData);
+  return dataURIToBlob(imageData);
 }
 
+function findMaxWidth(config, canvas) {
+  //Let's find the max available width for scaled image
+  var ratio = canvas.width / canvas.height;
+  var mWidth = Math.min(config.maxWidth, ratio * config.maxHeight);
+  if (
+    config.maxSize > 0 &&
+    config.maxSize < canvas.width * canvas.height / 1000
+  )
+    mWidth = Math.min(
+      mWidth,
+      Math.floor(Math.sqrt(config.maxSize * ratio))
+    );
+  if (!!config.scaleRatio)
+    mWidth = Math.min(
+      mWidth,
+      Math.floor(config.scaleRatio * canvas.width)
+    );
+
+  if (config.debug) {
+    console.log(
+      'browser-image-resizer: original image size = ' +
+        canvas.width +
+        ' px (width) X ' +
+        canvas.height +
+        ' px (height)'
+    );
+    console.log(
+      'browser-image-resizer: scaled image size = ' +
+        mWidth +
+        ' px (width) X ' +
+        Math.floor(mWidth / ratio) +
+        ' px (height)'
+    );
+  }
+  if (mWidth <= 0) {
+    mWidth = 1;
+    console.warning('browser-image-resizer: image size is too small');
+  }
+
+  return mWidth;
+}
+
+function exifApplied(canvas, ctx, orientation, img) {
+  var width = canvas.width;
+  var styleWidth = canvas.style.width;
+  var height = canvas.height;
+  var 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 dataURIToBlob(dataURI) {
@@ -44,0 +169,0 @@ // convert base64 to raw binary data held in a string

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

160583

increased by130.24%

Number of package files

9

increased by50%

Lines of code

2248

increased by1418.92%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes