Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Resize and crop images in the Browser with orientation fix using exif
import EXIF from 'exif-js';
const hasBlobConstructor = typeof (Blob) !== 'undefined' && (function checkBlobConstructor() {
try {
return Boolean(new Blob());
} catch (error) {
return false;
}
}());
const hasArrayBufferViewSupport = hasBlobConstructor && typeof (Uint8Array) !== 'undefined' && (function checkArrayBufferView() {
try {
return new Blob([new Uint8Array(100)]).size === 100;
} catch (error) {
return false;
}
}());
const hasToBlobSupport = (typeof HTMLCanvasElement !== 'undefined' ? HTMLCanvasElement.prototype.toBlob : false);
const hasBlobSupport = (hasToBlobSupport || (typeof Uint8Array !== 'undefined' && typeof ArrayBuffer !== 'undefined' && typeof atob !== 'undefined'));
const hasReaderSupport = (typeof FileReader !== 'undefined' || typeof URL !== 'undefined');
const hasCanvasSupport = (typeof HTMLCanvasElement !== 'undefined');
export default class ImageTools {
constructor() {
this.browserSupport = this.isSupportedByBrowser();
}
isSupportedByBrowser = () => (hasCanvasSupport && hasBlobSupport && hasReaderSupport);
resize = (file, maxDimensions) => new Promise((resolve) => {
if (!this.browserSupport || !file.type.match(/image.*/)) return resolve(file); // early exit - not supported
if (file.type.match(/image\/gif/)) return resolve(file); // early exit - could be an animated gif
const image = document.createElement('img');
image.onload = () => {
let width = image.width;
let height = image.height;
if (width >= height && width > maxDimensions.width) {
height *= maxDimensions.width / width;
width = maxDimensions.width;
} else if (height > maxDimensions.height) {
width *= maxDimensions.height / height;
height = maxDimensions.height;
} else return resolve(file); // early exit; no need to resize
EXIF.getData(image, () => {
const orientation = EXIF.getTag(image, 'Orientation');
const imageCanvas = this.drawImageToCanvas(image, orientation, 0, 0, width, height, 'contain');
if (hasToBlobSupport) imageCanvas.toBlob(blob => resolve(blob), file.type);
else resolve(this.toBlob(imageCanvas, file.type));
});
};
this.loadImage(image, file);
return true;
});
crop = (file, dimensions) => new Promise((resolve) => {
if (!this.browserSupport || !file.type.match(/image.*/)) return resolve(file); // early exit - not supported
if (file.type.match(/image\/gif/)) return resolve(file); // early exit - could be an animated gif
const image = document.createElement('img');
image.onload = () => {
if (dimensions.width > image.width && dimensions.height > image.height) return resolve(file); // early exit - no need to resize
const width = Math.min(dimensions.width, image.width);
const height = Math.min(dimensions.height, image.height);
if (image.width > dimensions.width * 2 || image.height > dimensions.height * 2) {
return this.resize(file, { width: dimensions.width * 2, height: dimensions.height * 2 }).then((zoomedOutImage) => {
this.crop(zoomedOutImage, { width, height }).then(resolve);
});
}
EXIF.getData(image, () => {
const orientation = EXIF.getTag(image, 'Orientation');
const imageCanvas = this.drawImageToCanvas(image, orientation, 0, 0, width, height, 'crop');
if (hasToBlobSupport) imageCanvas.toBlob(blob => resolve(blob), file.type);
else resolve(this.toBlob(imageCanvas, file.type));
});
};
this.loadImage(image, file);
return true;
});
drawImageToCanvas = (img, orientation = 1, x = 0, y = 0, width = img.width, height = img.height, method = 'contain') => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
ctx.save();
switch (Number(orientation)) {
// explained here: https://i.stack.imgur.com/6cJTP.gif
case 1:
break;
case 2:
ctx.translate(width, 0);
ctx.scale(-1, 1);
break;
case 3:
ctx.translate(width, height);
ctx.rotate((180 / 180) * Math.PI); // 180/180 is 1? No shit, but how else will you know its need 180 rotation?
break;
case 4:
ctx.translate(0, height);
ctx.scale(1, -1);
break;
case 5:
canvas.width = height;
canvas.height = width;
ctx.rotate((90 / 180) * Math.PI);
ctx.scale(1, -1);
break;
case 6:
canvas.width = height;
canvas.height = width;
ctx.rotate((90 / 180) * Math.PI);
ctx.translate(0, -height);
break;
case 7:
canvas.width = height;
canvas.height = width;
ctx.rotate((270 / 180) * Math.PI);
ctx.translate(-width, height);
ctx.scale(1, -1);
break;
case 8:
canvas.width = height;
canvas.height = width;
ctx.translate(0, width);
ctx.rotate((270 / 180) * Math.PI);
break;
default:
break;
}
if (method === 'crop') ctx.drawImage(img, (img.width / 2) - (width / 2), (img.height / 2) - (height / 2), width, height, 0, 0, width, height);
else ctx.drawImage(img, x, y, width, height);
ctx.restore();
return canvas;
};
toBlob = (canvas, type) => {
const dataURI = canvas.toDataURL(type);
const dataURIParts = dataURI.split(',');
let byteString;
if (dataURIParts[0].indexOf('base64') >= 0) {
byteString = atob(dataURIParts[1]);
} else {
byteString = decodeURIComponent(dataURIParts[1]);
}
const arrayBuffer = new ArrayBuffer(byteString.length);
const intArray = new Uint8Array(arrayBuffer);
for (let i = 0; i < byteString.length; i += 1) {
intArray[i] = byteString.charCodeAt(i);
}
const mimeString = dataURIParts[0].split(':')[1].split(';')[0];
let blob = null;
if (hasBlobConstructor) {
blob = new Blob([hasArrayBufferViewSupport ? intArray : arrayBuffer], { type: mimeString });
} else {
const bb = new BlobBuilder();
bb.append(arrayBuffer);
blob = bb.getBlob(mimeString);
}
return blob;
};
loadImage = (image, file) => {
if (typeof (URL) === 'undefined') {
const reader = new FileReader();
reader.onload = (event) => {
image.src = event.target.result;
};
reader.readAsDataURL(file);
} else {
image.src = URL.createObjectURL(file);
}
};
}
@ylvare

This comment has been minimized.

Copy link

@ylvare ylvare commented Aug 24, 2018

Exactly what I needed. Many thanks!! Cant believe that this is more out of the box... A note to others. You need to call with const size = {height: 500, width: 500} imageTools.resize(file,size).

@TonyC5

This comment has been minimized.

Copy link

@TonyC5 TonyC5 commented Aug 25, 2018

I'm very new to javascript programming, so forgive my remedial question. I was previously using the solution posted by @dcollien to resize https://gist.github.com/dcollien/312bce1270a5f511bf4a. I then uploaded the returned blob to my server using XHR.

I think this solution posted by @SagiMedina is what I need to address image orientation issues. Since it appears that the usage of this ImageTools.resize() is different from @dcollien's solution, how do I call this Image�Tools.resize and upload the returned blob to my server?

More details:

With the original solution posted by @dcollien, my function call to ImageTools.resize is

ImageTools.resize(file, { width: 480, height: 320 }, function(blob, didItResize) { // upload blob to server });

What is the equivalent ImageTools.resize call for this solution?

Thank you.

@TonyC5

This comment has been minimized.

Copy link

@TonyC5 TonyC5 commented Aug 25, 2018

@SagiMedina - nicely done. I ended up copying your switch(orientation) statement into @dcollien's solution (since that's what I started with) to utilize your rotation logic and transposing canvas width and height as needed. I'm still interested in how to use your solution.

@SagiMedina

This comment has been minimized.

Copy link
Owner Author

@SagiMedina SagiMedina commented Sep 20, 2018

@ylvare I'm glad to hear you found it useful :)

@TonyC5 you still use ImageTools.resize but it's written as Promise so the instad of calling it with a callback function use it like this:

ImageTools.resize(file, { width: 480, height: 320 }).then((blob) => {
   // upload blob to server
})
@MatthewLHolden

This comment has been minimized.

Copy link

@MatthewLHolden MatthewLHolden commented Oct 12, 2018

Hey @SagiMedina, how would I go about implementing this into an angular solution? I link to this file in my index.html file, but i get errors on the following:

  1. import EXIF from 'exif-js'; = This didn't work. So I ended up referencing a CDN of exif-js and adding that to my index.html which is probably wrong as your ImageTools file doesn't have EXIF to then reference.
  2. When I call image tools with the following:
  detectFiles(event) {
    const selectedFiles = event.target.files;
    if (selectedFiles && selectedFiles.length > 0) {
      ImageTools.resize(selectedFiles[0], { width: 480, height: 320 }).then((blob) => {
        // upload blob to server
        console.log('upload blob time');
     })
    }
  }

I get a console error of 'ERROR ReferenceError: ImageTools is not defined'. Does this whole script perform the same resize methods as the original script PLUS the orientation fix?

Any idea how to remedy this please? :)

@SagiMedina

This comment has been minimized.

Copy link
Owner Author

@SagiMedina SagiMedina commented Oct 12, 2018

Hey @MatthewLHolden, are you working with webpack or something similar?
Basically, it should work with Angular React Vue or anything else you just need a JS 'compiler' Like bable to transform ES-2015 to plain JS.

  1. You should npm install exif-js
  2. You need to import (or require) the ImageTool class.
    And yes it should work the same plus the orientation fix, if I remember correctly how the original one works...

If it's still unclear LMK and I'll try to elaborate.

@MatthewLHolden

This comment has been minimized.

Copy link

@MatthewLHolden MatthewLHolden commented Oct 15, 2018

Hey @SagiMedina - Thanks for the rapid response. You'll have to excuse the questions, fairly new to the whole web pack thing...

  1. In replace of "import EXIF from 'exif-js', what do I need to put? I've installed exif-js via npm. I've just added var EXIF = require('exif-js'); so far
  2. I've imported the imageTools class into my angular component ts file: import ImageTools from '../../../../assets/scripts/ImageTools';
  3. If I just run the app without the import (just to let the file load on its own) I get: Uncaught SyntaxError: Unexpected token export on the following line from ImageTools "export default class ImageTools {"
  4. I currently just store the 'imageTools.js' file in an assets folder and link to it via my index.html file. Does that mean it's not going through the web pack compiler. If so, what do I need to do to use this file?

Thanks again. I appreciate the time.

@SagiMedina

This comment has been minimized.

Copy link
Owner Author

@SagiMedina SagiMedina commented Oct 18, 2018

@MatthewLHolden
Hmm ok, so if you are using webpack with ES6 compiler you don't need to change anything in this file.

Just import it to your code like this
import ImageTools from 'PATH/TO/FILE';
And in your code initiate it like this
const imageTools = new ImageTools();
Then you can do

imageTools.resize(file, { width: 1080, height: 1920 });
imageTools.crop(file, { width: 400, height: 400 });
@MatthewLHolden

This comment has been minimized.

Copy link

@MatthewLHolden MatthewLHolden commented Oct 19, 2018

@SagiMedina - Still not working I'm afraid. Here's what I've done so far:

  1. Save your JS file
  2. In my component add:

import { ImageTools } from '../../../../assets/scripts/ImageTools.js`

  1. In my component function add:
const imageTools = new ImageTools();
imageTools.resize(file, { width: 480, height: 320 }).then((blob) => {})

When compiling my app, the terminal throws the following error:

ERROR in ./src/assets/scripts/ImageTools.js
Module parse failed: Unexpected token (33:25)
You may need an appropriate loader to handle this file type.
| }
|
| isSupportedByBrowser = () => (hasCanvasSupport && hasBlobSupport && hasReaderSupport);
|
| resize = (file, maxDimensions) => new Promise((resolve) => {

@SagiMedina

This comment has been minimized.

Copy link
Owner Author

@SagiMedina SagiMedina commented Oct 20, 2018

@MatthewLHolden Try
import ImageTools from '../../../../assets/scripts/ImageTools.js'

@MatthewLHolden

This comment has been minimized.

Copy link

@MatthewLHolden MatthewLHolden commented Oct 22, 2018

@SagiMedina - Same error :( - It seems to be this line: isSupportedByBrowser = () => (hasCanvasSupport && hasBlobSupport && hasReaderSupport); that it has issues with. Any idea what this could be? This is the final piece of a puzzle I've been working on, so I'm excited to get it implemented :)

@SagiMedina

This comment has been minimized.

Copy link
Owner Author

@SagiMedina SagiMedina commented Oct 24, 2018

@MatthewLHolden Can you share your webpack and bable configuration?

@MatthewLHolden

This comment has been minimized.

Copy link

@MatthewLHolden MatthewLHolden commented Oct 26, 2018

Hey @SagiMedina - I think the only way to get a webpack.config file is to eject the angular application. Which I don't think is too wise as I think adding npm packages after that is a little more tricky. I'm running Angular 6 if that helps at all.

@pranav65

This comment has been minimized.

Copy link

@pranav65 pranav65 commented Nov 17, 2018

Hey @SagiMedina - this is exactly what i need to fix the orientation issue but i cant figure out how to use this. i was previously using ImageTools.js posted by @dcollien by calling it like <script src ="ImageTools.js" type="text/javascript"></script> and then implemented it as
'document.getElementById('inputfile').onchange = function(evt) {

ImageTools.resize(this.files[0], {

  width: 320, // maximum width

    height: 240 // maximum height

}, function(blob, didItResize) {

    document.getElementById('preview').src = window.URL.createObjectURL(blob);

    // upload to server.

});

};`
but to use your code what should i do different .. i am new to web development and i really need it bcz images are getting rotated.. please help me..
Thanks in Advance.

@pranav65

This comment has been minimized.

Copy link

@pranav65 pranav65 commented Nov 20, 2018

@SagiMedina Thank you for not replying, found a way better alternative(bcz when processing image through yours code using some android phone, image turns black.) than yours. https://github.com/davejm/client-compress

@SagiMedina

This comment has been minimized.

Copy link
Owner Author

@SagiMedina SagiMedina commented Dec 2, 2018

@pranav65 this gist is written in ES2015, but I'm glad you found something that works for you.

@MatthewLHolden

This comment has been minimized.

Copy link

@MatthewLHolden MatthewLHolden commented Dec 3, 2018

@SagiMedina - Any idea on my error at all? I still can't get past this :(

It's angular application. Component below.

Your script is just a JS file in my assets folder.

I have npm'd exif-js.

component.ts
import { ImageTools } from '../../../assets/scripts/imageTools.js';
...

  resizeImage(file){
    const imageTools = new ImageTools();
    imageTools.resize(file, { width: 480, height: 400 }).then((blob) => {
         // I upload data here
      });    
  }

Error in the console on load (the function hasn't even been called yet)

./src/assets/scripts/imageTools.js

Module parse failed: Unexpected token (33:25)
You may need an appropriate loader to handle this file type.
|     }
| 
|     isSupportedByBrowser = () => (hasCanvasSupport && hasBlobSupport && hasReaderSupport);
| 
|     resize = (file, maxDimensions) => new Promise((resolve) => {

The only way I've managed to get it to work is by using Babel's online compiler. However, I do end up with console errors that read:

imageTools.js:3 Uncaught ReferenceError: exports is not defined

on the following code:

Object.defineProperty(exports, "__esModule", {
    value: true
})
@SagiMedina

This comment has been minimized.

Copy link
Owner Author

@SagiMedina SagiMedina commented Dec 5, 2018

@MatthewLHolden Are you using any es compiler? And in which stage?
sorry for the delay, for some reason I'm not getting any notification about comments here

@MatthewLHolden

This comment has been minimized.

Copy link

@MatthewLHolden MatthewLHolden commented Dec 6, 2018

AOT I guess? My project was built on Angular Cli (Angular 6) - No worries about the notifications, I'm not getting them either! :)

@bhelm

This comment has been minimized.

Copy link

@bhelm bhelm commented Jan 18, 2019

I expected the resulting image to be no larger than specified size, but this can happen with the current code. Here is my fixed version:

                if (width >= height && width > maxDimensions.width) {
                    height *= maxDimensions.width / width;
                    width = maxDimensions.width;
                    if (height > maxDimensions.height) {
                        width *= maxDimensions.height / height;
                        height = maxDimensions.height;
                    }
                } else if (height > maxDimensions.height) {
                    width *= maxDimensions.height / height;
                    height = maxDimensions.height;
                    if(width > maxDimensions.width) {
                        height *= maxDimensions.width / width;
                        width = maxDimensions.width;
                    }
                } else return resolve(file); // early exit; no need to resize

Basicly, after resizing i.e. by width, check again that the height is within the boundary and resize if not.
i.e. i had an input image with 2048x1536 that should be fit within 240x135. Previous code resulted in an 240x180 pixel image.

@cnyyk

This comment has been minimized.

Copy link

@cnyyk cnyyk commented Apr 27, 2019

@bhelm

2048x1536 should be 240x180.

if 240x135, image will be out of shape

@bhelm

This comment has been minimized.

Copy link

@bhelm bhelm commented Apr 27, 2019

@cnyyk that is the point. I think if i rescale 2048x1536 to 240x135, I expect an 180x135 image as result instead of 240x180. That is because 180x135 fits within the requested 240x135 boundaries while keeping the shape.
My usecase was that I wanted to display multiple thumbnails next to each other. Without the fix, the portrait pictures were larger than the horizontal ones, which looked bad.

@allanesquina

This comment has been minimized.

Copy link

@allanesquina allanesquina commented Aug 1, 2019

Well done man. Thanks! 👍

@marr

This comment has been minimized.

Copy link

@marr marr commented Aug 14, 2019

I notice this calls URL.createObjectURL but doesn't ever release the url. The documentation suggests using URL.revokeObjectURL for every call to createObjectUrl to avoid memory leaks. This can be seen in the "Memory Management" section of this document: https://devdocs.io/dom/url/createobjecturl.

I'm not sure where a good place to call that would be here, but I wonder if calling it after the resolve call would be best.

@briangonzalezmia

This comment has been minimized.

Copy link

@briangonzalezmia briangonzalezmia commented Sep 9, 2019

@SagiMedina Thank you! Works perfectly with Axios and it's fast!

@enkhee

This comment has been minimized.

Copy link

@enkhee enkhee commented Nov 29, 2019

Hello
Reactjs error

./src/Components/ImageTools.js
  Line 192:  'BlobBuilder' is not defined  no-undef

Search for the keywords to learn more about each error.
@frankalbenesius

This comment has been minimized.

Copy link

@frankalbenesius frankalbenesius commented Nov 30, 2019

@enkhee
I changed:

const bb = new BlobBuilder();
bb.append(arrayBuffer);
blob = bb.getBlob(mimeString);

to:

blob = new Blob([arrayBuffer]);

That's what was recommended here and it seems to be working.

thanks for the helpful code, @SagiMedina !

@kilianso

This comment has been minimized.

Copy link

@kilianso kilianso commented Mar 16, 2020

Hey there, I was using @dcollien solution as well and were facing the same rotation issues. But with your code, my Svelte + Rollup setup fails showing the following issue:

[!] (plugin commonjs) SyntaxError: Unexpected token (33:25) in /Users/username/Git/projectname/src/ImageTools.js
src/ImageTools.js (33:25)

33:     isSupportedByBrowser = () => (hasCanvasSupport && hasBlobSupport && hasReaderSupport);
                                                     ^

Any idea?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment