用图像二聚体设置画布

Question

我正在尝试设置带有图片背景的画布。我想让图像变量，但这是为了不同的讨论。

这是我的代码。

var canvas = document.getElementsByTagName('canvas')[0];

var img = document.createElement('img');

img.onload = function () { alert(img.width + ' x ' + img.height); };

img.src='images/maps/de_dust2.jpg';

canvas.width  = img.width;
canvas.height = img.height;

当页面加载时，我会获得具有正确像素高度和宽度的警报，但画布不会显示。

感谢任何帮助。

Answer 1

var canvas = document.getElementsByTagName('canvas')[0];

var img = document.createElement('img');

img.onload = function () {
    // you need to have thes in the onload, to have img width, height > 0
    canvas.width  = img.width;
    canvas.height = img.height;
    alert(img.width + ' x ' + img.height);
};

img.src='images/maps/de_dust2.jpg';