Question

我希望用户上传图片或指定图片的网址，然后能够看起来他们正在图片上方绘图。所以我可以用背景图像制作一个<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'});
});

Calculating image source.

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

1 个答案: