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

計算圖像源。