CODEWITHSUNDEEP
javascriptjqueryhtmlcanvashtml5-canvas
joedborg
joedborg

Reputation: 18353

Resize HTML canvas after loading image

See http://jsfiddle.net/jdb1991/6sxke/

I've got a canvas element that doesn't know what it's going to be used for until an image has loaded, so I need to be able to change the dimensions of the element on the fly, after creating the image object.

Something is going wrong though, as it seems to be running the commands asynchronously; writing the image to the context before the resize occurs.

Upvotes: 1

Views: 2380

Answers (2)

George Aslanis
George Aslanis

Reputation: 527

It appears i = objectifyImage will set the image src before the image.onload handler is defined. This will cause cached images to get loaded on some browsers prior to the onload definition. Its a good idea to always define onload handlers before setting the image.src to avoid timing issues with cached images.

var self = this;
.....
this.img = document.createElement('img');
this.img.onload = function () {
    self.loaded = IMGSTATE_OK;
    $Debug.log('loaded image:"' + self.img.src);
    }
this.img.onerror = function () {
    self.loaded = IMGSTATE_ERR;
    $Debug.log('error image:"' + self.img.src);
    }
this.img.src = href;
..... later on check the load state

Upvotes: 0

Yoshi
Yoshi

Reputation: 54649

use:

function objectifyImage(i) {
    var img_obj = new Image();
    img_obj.src = i;
    return img_obj;
}

var canvas = document.getElementById('display');
var context = canvas.getContext('2d');
i = objectifyImage('https://www.google.co.uk/images/srpr/logo3w.png');
i.onload = function() {
    canvas.width = i.width;
    canvas.height = i.height;

    context.drawImage(i, 0, 0);
};
​

demo: http://jsfiddle.net/ycjCe/1/

The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size. (If your renderings seem distorted, try specifying your width and height attributes explicitly in the attributes, and not with CSS.)

source: https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Basic_usage

Upvotes: 3

Related Questions