Getting H and W

[Nile]

Hey.
I wanted to know how you could get a height and width of an image with JS, I know how to do it with PHP tho, so any help appreciated!

[Twey]

var m = new Image();
m.src = "/blah/foo.png";
m.onload = function() {
  this.height; // for the height
  this.width; // for the width
};

[Nile]

Could you explain what this does:

var m = new Image();
m.src = "/blah/foo.png";
m.onload = function() {

[jackbenimble4]

Could you explain what this does:

var m = new Image();
m.src = "/blah/foo.png";
m.onload = function() {

The first line creates a new image element pointed to by the variable m. This image element is just like any other image element that's on a webpage, except this image isn't included in the document yet and it is a completely generic image element. At it's current state, there is no image file associated with the element. It'd be the equivalent of creating writing an image without any src attribute, like:

<img />

The second line sets the src property to the image you want to check the width of or height of. You would replace '/blah/foo.png' with the path to the image you want to use.

The third line sets the 'onLoad' 'event handler' of the image to the function within the brackets. This tells the browser that once the image is loaded to execute that function. You wouldn't want to get the width and height before the image was loaded.



Also, if you wanted to find the width and height of an image already within the document, you can do that too. The simplest way would be to set an id for the image element, and use the document.getElementById() function to get the image. Here's an example:

var img = document.getElementById("myImage");
var h = img.height;
var w = img.width;

Your image would look like:

<img src="foo/bar.png" id="myImage" />

[Nile]

With this code:

<script type="text/javascript">
var m = new Image();
m.src = "test.jpg";
m.onload = function() {
  this.height; // for the height
  this.width; // for the width
};
document.write(m);
</script>

I get this:

[object HTMLImageElement]

[Master_script_maker]

the image() function is used to preload an image, and still has to be declared in the body.

[Nile]

So I should put it in the body?

[Master_script_maker]

sorry, i wasn't clear. the image still has to be declared in the body
if you want to get an images height i think you should just use:

var img = document.getElementById("imageid");
var h = img.height;
var w = img.width;

[Nile]

I just wanna know why this script isn't workiing?:

<script type="text/javascript">
var m = new Image();
m.src = "test.jpg";
m.onload = function() {
  this.height; // for the height
  this.width; // for the width
};
document.write(m);
</script>

[Master_script_maker]

it doesn't work the way you intended because you can't write an image element that way. to add it to the document you would do this(replaces the span with an image):

<span id="image_1"></span>

<script type="text/javascript">
var m = new Image();
m.src = "image_1.jpg";
m.onload = function() {
  var h=this.height; // for the height
  var w=this.width; // for the width
};
var span=document.getElementById("image_1");
var body=document.getElementsByTagName("body");
body[0].insertBefore(m, span);
body[0].removeChild(span);

</script>