react-images-upload
react-images-upload copied to clipboard
Find Dimensions of Image.
I want to know the Dimensions of the image ( in Pixels). How can I get that?
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.