how to get image height and width resolution in angularJS/Javascript before uploading

Question

I'm uploading Image ,before uploading I need to check the image resolution whether it is greater than 920*675 resolution,should not allow images to upload less than the resolution(920*675)

I don't believe it's possible to know the size before uploading. You can always set it to null if it's not valid, but after an upload. Unless you are talking about uploading to a server after selecting it — Aleksey Solovey, Oct 23 '17 at 11:03
@AlekseySolovey ,once you choose image to upload and submit to upload just before uploading to server am able to get the file size but not it's height and widht resolutions. — Harry, Oct 23 '17 at 11:06
Potentially: `var img = new Image();`, `img.src = your_image;` with `img.width` and `img.height` for your resolutions — Aleksey Solovey, Oct 23 '17 at 11:13
+1 @AlekseySolovey - he is correct you don't need to upload to a server, you can do this all client-side — Alicia Sykes, Oct 23 '17 at 11:16

Alicia Sykes · Answer 1 · 2021-03-23T12:35:25.087

var reader = new FileReader();
reader.onload = onLoadFile;
reader.readAsDataURL(filtItem._file);
          
function onLoadFile(event) {
    var img = new Image();
    img.src = event.target.result;
    console.log(img.width, img.height)
}

This is the code snippet copied from https://github.com/nervgh/angular-file-upload/blob/master/examples/image-preview/directives.js.

This is now part of the HTML5 File API, so in short you can use:

const i = new Image(); 
i.onload = () => console.log( i.width+", "+i.height );
i.src = imageData;

how to get image height and width resolution in angularJS/Javascript before uploading

1 Answers1