How to get original image size (width & height) in JavaScript?
How to get original image size (width & height) in JavaScript?
Using the HTML 5 image naturalwidth properties and natural height properties, It is easy to find orginal size
For ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Find Real Image Width and Height</title>
<script type="text/javascript">
function imgSize(){
var myImg = document.querySelector("#sky");
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
}
</script>
</head>
<body>
<img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky" contextmenu="skymenu">
<p><button type="button" onclick="imgSize();">Get Original Image Size</button></p>
</body>
</html>
The following code will solve cross browser problem by using jquery method:
For ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Get Real Image Dimensions</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
var img = $("#sky");
// Create dummy image to get real width and height
$("<img>").attr("src", $(img).attr("src")).load(function()
{
var realWidth = this.width;
var realHeight = this.height;
alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
});
});
});
</script>
</head>
<body>
<img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky" contextmenu="skymenu">
<p><button type="button">Get Original Image Size</button></p>
</body>
</html>
Webkit browsers set the height and width property after the image is loaded. Instead of using timeouts, I’d recommend using an image’s onload event. Here’s a quick example:
var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
.attr("src", $(img).attr("src"))
.load(function() {
pic_real_width = this.width; // Note: $(this).width() will not
pic_real_height = this.height; // work for in memory images.
});To avoid any of the effects CSS might have on the image’s dimensions, the code above makes an in memory copy of the image. This is a very clever solution suggested by FDisk.
You can also use the naturalHeight and naturalWidth HTML5 attributes.
Cross-Browser:
$("<img/>").load(function(){
var width = this.width,
height = this.height;
alert( 'W='+ width +' H='+ height);
}).attr("src", "image.jpg");HTMLImageElement properties / HTML5 compliant browsers
If you want to investigate about all the HTMLImageElement properties: https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement
Many of those properties are available already in modern, HTML5 compliant browsers, and accessible using jQuery’s .prop() metod
var $img = $("#myImage");
console.log(
$img.prop("naturalWidth") +'\n'+ // Width (Natural)
$img.prop("naturalHeight") +'\n'+ // Height (Natural)
$img.prop("width") +'\n'+ // Width (Rendered)
$img.prop("height") +'\n'+ // Height (Rendered)
$img.prop("x") +'\n'+ // X offset
$img.prop("y") // Y offset ...
);
