Javascript Image() object erroneously setting height and width to 0 sometimes

Question

I'm working on an app that is dynamically generating images with Javascript's image() object. Code below, where object is the URL I am passing in -

resizeImage: function(object) {
        var img = new Image();
        img.src = object;
        console.log(img);
        console.log(img.width);
        console.log(img.height);
        var ratio;
        if(img.width > img.height) {
            ratio = 82/img.width;
        } else {
            ratio = 82/img.height;
        }
        img.height *= ratio;
        img.width *= ratio;
        return img;
    },

The output of my console log shows the image object is created with source set to URL -
<img src="https://z3nburmaglot.zendesk.com/attachments/token/F0Y7C9UfUcOaA7nCMJfE5T1yB/?name=Show+Support+Tickets+on+Customer+View.png"> and height and width of 0.

Some of the images load fine - they set height and widgth appropriately and if I refresh the JS (run the function again), the images that had 0 height and width suddenly change to the correct height and width.

Any thoughts on why constructing an image this way would fail sometimes?

score 3 · Accepted Answer · answered Jun 12 '15 at 06:09

3

Sounds like your image hasn't loaded yet when you get its width or height. Then it will be 0.

When you refresh, the image is in your browser cache and will load immediately so its width and height are available straight up.

Use the onload() event of the Image object to execute code once the image has been loaded properly

resizeImage: function(object) {
    var img = new Image();

    // first set onload event
    img.onload = function() {
        console.log(img);
        console.log(img.width);
        console.log(img.height);
        var ratio;
        if(img.width > img.height) {
            ratio = 82/img.width;
        } else {
            ratio = 82/img.height;
        }
        img.height *= ratio;
        img.width *= ratio;
    }

    // then set the src
    img.src = object;

    return img;
},

answered Jun 12 '15 at 06:09

Reinder Wit

6,490
1
25
36

This looks like it will solve the issue, but I need to do a bit of tweaking to get the the correct ratio and height/width. No longer set to 0, but also not resizing appropriately like I had before. By the way, is there a reference for image.onload? I've been using https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement and I don't see it mentioned. Or is it just a generic JS onload event? – Jimmy Long Jun 12 '15 at 06:20
What resizing are you trying to achieve? a max height and width of 82? – Reinder Wit Jun 12 '15 at 06:31
Exactly that... any doc for onload() event of Image object? Nevermind, it's just general onload event - http://www.w3schools.com/jsref/event_onload.asp – Jimmy Long Jun 12 '15 at 06:32
for proper resizing using the ratio, check the answer on this post: http://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio – Reinder Wit Jun 12 '15 at 06:35
thanks for that. I've decided it will be easier to pass in the height and width the image constructor new Image(82, 82) and forego the aspect ratio rather than trying to change the size of the images after they are constructed. – Jimmy Long Jun 12 '15 at 07:30

Javascript Image() object erroneously setting height and width to 0 sometimes

1 Answers1