如何为HTML5画布制作大小未知的背景？

Question

I want users to upload an image or specify a URL of an image and then be able to look like they're drawing on top of the image. So I can make a <canvas> element with a background image. But I don't know beforehand how big that image is (well I can figure it out if they uploaded an image). How can I deal with this using jQuery?

I know I can call $('img#id_name').width and create a canvas based on that width (and get the height the same way). But I want that to be the background image.

Answer 1

You can get image's original width/height values after loading and than use css() method for defining values.

var img = $('img#id_name')[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() {
        iWidth = this.width;   // Note: $(this).width() will not
        iHeight = this.height; // work for in memory images.

   $('#canvasEle').css({'width': iWidth + 'px', 'height': iHeight + 'px'});
});

Calculating image source.