javascript - 更改图像的来源会使它的宽度/高度在第一次点击时为零

Question

当我从服务器上已有的各种选项中选择一个图像，然后在 Canvas 上单击时，将在单击的位置绘制一个图像。

我遇到的问题是，在第一次单击时，图像的高度和宽度为零，并且没有绘制任何内容。在第二次点击时，它完美地工作，并且它继续完美地工作，直到我选择不同的图像，然后第一次点击不再工作。

我猜测，因为它只发生在为图像选择新来源时，这与设置宽度和高度时尚未加载的图像有关。

代码如下:

其中 source 是一个字符串示例:“sample/ball.png”、“sample/dog.png”

Javascript:

  this.image_object = new Image();
  this.image_object.src = source;
  this.width = this.image_object.width;
  this.height = this.image_object.height;

CoffeeScript :

@image_object = new Image()
@image_object.src = source
@width = @image_object.width
@height = @image_object.height

如有任何建议，我们将不胜感激。此代码仅在单击单独的按钮时调用，因此无法在页面加载时调用图像。

编辑:

我还想提一下，手动设置图像宽度/高度“new Image(52,52)”仍然需要点击两次，因为图像未加载。

Answer 1

是的，那是因为在调用 .width 属性时图像还没有加载到 DOM 中。您所做的只是设置源。这就是单击按钮后它起作用的原因。在确定宽度之前，您必须将图像加载到 DOM 中。

你在使用框架吗？

如果没有，这可能会有所帮助。 http://www.webdeveloper.com/forum/showthread.php?t=108392