react-images-upload icon indicating copy to clipboard operation
react-images-upload copied to clipboard

Find Dimensions of Image.

Open deveshlashkari opened this issue 5 years ago • 1 comments

I want to know the Dimensions of the image ( in Pixels). How can I get that?

deveshlashkari avatar Jan 21 '20 13:01 deveshlashkari

Hi there man. Basically you have a callback you can set on the image uploader right? So let's say you set it as "onDrop". Then in the onDrop function you must load the image file using the file reader. When loads, you can get the w & h. Would be something like this.

   const onDrop = picture => {
        //in my case I get an array of files on each call of the onDrop, so I check the last one in there(if any)
        if(picture.length > 0){
            const imgToCheck = picture[picture.length - 1];
            var reader = new FileReader();
            reader.onload = function(e){
                var img = new Image();
                img.src = e.target.result;
                img.onload = function(){
                    const imgW = img.width;
                    const imgH = img.height;
                    const ar = imgW / imgH;
                    console.log(`W:${imgW},H:${imgH}. AR:${ar.toFixed(1).toString()}`);
                };
            };
            reader.readAsDataURL(imgToCheck);
        }
        ........

PS: I just a beginner so this may be refactor, but for now it works for me. Hope it helps you.

theghost1980 avatar Mar 16 '21 12:03 theghost1980