How to get the size after cropping of an uploaded image with javascript

Question

I have the following input element: <input type="file" accept="image/*" multiple=""> inside of a div with the id ImageUploader. The uploaded images get automatically cropped, but I have no influence on that functionality.

JS:

var upload = document.getElementById("ImageUploader");
upload.onchange=function(event){
    let img = new Image()
    //console.log(event);
    img.src = window.URL.createObjectURL(event.target.files[0]);
    
    img.onload = () => {
        
        console.log(event.target.files[0].initialCroppedAreaPixels);
        console.log(event.target.files[0]);
        };
};

The strange thing is that for some images it is able to log the cropped size to the console, but for other images event.target.files[0].initialCroppedAreaPixels just returns undefined, which I don't understand, because in the next line, the file that gets logged into the console always has the initialCroppedAreaPixels attribute. What's the issue there?

Just a hunch: mayhap it only gets provided if the image actually gets cropped and not if it is small enough by default. — JavaScript, Jun 04 '21 at 08:46
I don't think that this is the problem, because the cropping is to a certain aspect ratio, so almost every image should get cropped — Sven, Jun 04 '21 at 08:50
Does this answer your question? [Check image width and height before upload with Javascript](https://stackoverflow.com/questions/8903854/check-image-width-and-height-before-upload-with-javascript) — Elikill58, Jun 04 '21 at 08:53
Unfortunately it doesn't, because the question does not deal with cropping — Sven, Jun 04 '21 at 09:47
Your questions asks how to get the image size. Your description sounds like you want to get the cropped size. Maybe change the title? — Peter Krebs, Jun 04 '21 at 12:09
"The uploaded images get automatically cropped" by some sort of magic? If you don't show how the cropping is done, how do you want us to be able to help you? Similarly, where is defined that `initialCroppedAreaPixels` property? What is it? Without code from your part, we can't help you. — Kaiido, Jun 05 '21 at 09:17
As I said I have no influence on that functionality and I cannot provide the code either. — Sven, Jun 05 '21 at 12:12
Then how do you even expect random people on the Internet will be able to help you? — Kaiido, Jun 06 '21 at 02:10

score 1 · Answer 1 · answered Jun 06 '21 at 10:01

I am going to focus on this part (since we know very little about the rest of the code) :

event.target.files[0].initialCroppedAreaPixels just returns undefined, which I don't understand, because in the next line, the file that gets logged into the console always has the initialCroppedAreaPixels attribute.

In your js console the first console.log return the value of an attribute at a specific time. The second one return an object (the object itself and not its value at a specific time).

to convince you, open a js console and do the following experiment :

let myObject = {};
console.log(myOject);
myObject.foo = 'bar';

If you click on the message logged by console.log you can see the foo attribute of myObject although it did not exist at the console.log moment.

From MDN Web docs - console.log :

Please be warned that if you log objects in the latest versions of Chrome and Firefox what you get logged on the console is a reference to the object, which is not necessarily the 'value' of the object at the moment in time you call console.log()

So your problem is that the img.onload event is not the right time to check the initialCroppedAreaPixels attribute. This event may occur before or after the attribute has been defined.

What is right time to check it ? I can't tell you. May be the part of the programm that crops the images provides a callback for when the image is ready ? Good luck with that.

score 0 · Accepted Answer · answered Jun 07 '21 at 07:03

console.log output shows root level objects immediately, but you're not seeing the associated list of properties until you expand the object with the toggle arrow.. it's possible those properties are added after the fact (if even by milliseconds)

This might be the case with your initialCroppedAreaPixels property which is applied to an existing event.target object.

To test if this is the case for you you can try console.log(Object.keys(event.target.files[0])) or console.log(JSON.stringify(event.target.files[0])) which will show the actual keys available when the log was called

Some have reported this being a solution:

let croppedImage =JSON.parse(JSON.stringify(event.target.files[0]));
console.log(croppedImage.initialCroppedAreaPixels);

and it's possible that a small timer delay might help

setTimeout( () => {
   console.log(event.target.files[0].initialCroppedAreaPixels);
}, 100)

How to get the size after cropping of an uploaded image with javascript

2 Answers2