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

Question

我希望用户上传图像或指定图像的 URL，然后看起来就像他们在图像之上绘图。所以我可以<canvas>用背景图像制作一个元素。但是我事先不知道该图像有多大（如果他们上传了图像，我可以弄清楚）。如何使用 jQuery 处理这个问题？

我知道我可以$('img#id_name').width根据该宽度调用并创建一个画布（并以相同的方式获得高度）。但我希望它成为背景图像。

Answer 1

您可以在加载后获取图像的原始宽度/高度值，然后使用css()定义值的方法。

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'});
});

计算图像源。