<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Get the real width and height of
an image using JavaScript
</
title
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
h2
style
=
"color:green;"
>
GeeksforGeeks
</
h2
>
<
h2
style
=
"color:purple;"
>
Getting the real width and height of an image
</
h2
>
<
script
>
function CheckImageSize() {
var image = document.getElementById("Image").files[0];
createReader(image, function(w, h) {
alert("Width is: " + w +
"pixels, Height is: " + h + "pixels");
});
}
function createReader(file, whenReady) {
var reader = new FileReader;
reader.onload = function(evt) {
var image = new Image();
image.onload = function(evt) {
var width = this.width;
var height = this.height;
if (whenReady) whenReady(width, height);
};
image.src = evt.target.result;
};
reader.readAsDataURL(file);
}
</
script
>
<
input
type
=
"file"
id
=
"Image"
/>
<
input
type
=
"button"
value
=
"Find the dimensions"
onclick
=
"CheckImageSize()"
/>
</
body
>
<
html
>