Can Javascript access native image size?

前端未结

关注

 5  1164

I\'m writing a jQuery function where I\'d like to access both the native size of an image, and the size specified for it on the page. I\'d like to set a variable for each.

相关标签:

5条回答

有刺的猬

2021-01-03 20:47
This should work:
```
var img = $('#imageid')[0]; //same as document.getElementById('imageid');
var width = img.naturalWidth;
var height = img.naturalHeight;
```
The naturalWidth and naturalHeight return the size of the image response, not the display size.

According to Josh' comment this is not supported cross browser, this might be correct, I tested this in FF3
0 讨论(0)
发布评论:

提交评论
- 加载中...

既然无缘

2021-01-03 20:57

EDIT - new idea... see http://jsbin.com/uzoza

  var fixedW = $("#imageToTest").width(); 
  $("#imageToTest").removeAttr("width"); 
  var realW = $("#imageToTest").width(); 
  $("#imageToTest").attr("width", fixedW);

ORIGINAL ANSWER

see How to get image size (height & width) using JavaScript?

var img = $('#imageid'); 

var width = img.clientWidth;
var height = img.clientHeight;

0 讨论(0)

无人及你

2021-01-03 20:59

I'm adding a way to accomplish this and be sure that there is support for all browsers. Pretty much all browsers support naturalWidth and naturalHeight except for Internet Explorer 8 and below.

Since IE 8 and below would return the size of the visible image and not the natural size when using trying to retrieve size values, a small workaround is needed to get the full size dimensions which came from an example by Jack Moore.

function naturalSize(imageid) {
 imageid = (imageid.src ? imageid : document.getElementById(imageid));
 if (document.documentMode < 9) {
  var img = new Image();
  img.src = imageid.src;
  return {width: img.width,height: img.height};
 }
 return {width: imageid.naturalWidth,height: imageid.naturalHeight};
}

I set this up to support passing either the image ID value or the name of the ID.

Usage:

<img src="http://c64.exitof99.com/ims/VicGauntlet2013.png" id="some_img"  width="400">

naturalSize("some_img");

// Returns: Object {width: 731, height: 387}

<img src="http://c64.exitof99.com/ims/VicGauntlet2013.png"
onclick="aaa=naturalSize(this);alert('Size: '+aaa.width+'x'+aaa.height);">

// Displays: Size: 731x387

Be sure to make sure the image is loaded before calling this, whether by using onload or triggering upon adding it to the DOM.

Tested with: Windows XP - Firefox 1.5, IE 8 Windows 7 - IE 9, Chrome 56 Android 6.0.1 - Chrome 50 Android 5.1.1 - Opera Mini 7.6, Dolphin 10.3

Full code example:

<!DOCTYPE html>
<html dir="LTR" lang="en"><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body class="assignments" onload="run_test();">

<img src="http://c64.exitof99.com/ims/VicGauntlet2013.png" id="some_img" width="400">
<textarea id="outbox"></textarea>

<script type="text/javascript">
function naturalSize(imageid) {
 imageid = (imageid.src ? imageid : document.getElementById(imageid));
 if (document.documentMode < 9) {
  var img = new Image();
  img.src = imageid.src;
  return {width: img.width,height: img.height};
 }
 return {width: imageid.naturalWidth,height: imageid.naturalHeight};
}

function run_test() {
 var a = naturalSize("some_img");
 document.getElementById("outbox").innerHTML = "Size: "+a.width+"x"+a.height;
}
</script>
</body></html>

0 讨论(0)

孤城傲影

2021-01-03 21:00
My solution would be to write a web service that gets/downloads the image, and then gets its resolution and returns it as {width: x,height:y}. Then you call it with $.ajax or equivalent to retrieve this.

Alternatively you could add the image to a hidden div using
```
// e.g. don't set width and height
$("#hiddendiv").html("<img src='theurl'>"); 
```
And then get the div's width/height though I haven't tried it.
0 讨论(0)
发布评论:

提交评论
- 加载中...

故里飘歌

2021-01-03 21:01

Modern browsers

When I wrote this answer back in 2009 the browser landscape was much different. Nowadays any reasonably modern browser supports Pim Jager's suggestion using img.naturalWidth and img.naturalHeight. Have a look at his answer.

Legacy answer compatible with super old browsers

// find the element
var img = $('#imageid');

/* 
 * create an offscreen image that isn't scaled
 * but contains the same image.
 * Because it's cached it should be instantly here.
 */

var theImage = new Image();
theImage.src = img.attr("src");

// you should check here if the image has finished loading
// this can be done with theImage.complete

alert("Width: " + theImage.width);
alert("Height: " + theImage.height);

0 讨论(0)