Changing the image source makes its width / height zero the first time you click

Question

When I select an image from a variety of options already on the server, and then click on the canvas, the image will be drawn at the click location.

The problem I am facing is that the first click the height and width of the image are zero and nothing is drawn. In the second click, it works fine, and it continues to work fine until I select another image, and then the first click works again.

I assume that since this only happens when a new image source is selected, it has something to do with the fact that the image is not yet loaded when the width and height are set.

Here is the code:

where the source is an example line: "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 

Any suggestions are welcome. This code is called only when a separate button is pressed, so the image cannot be called when the page loads.

EDIT:

I also want to mention that when manually adjusting the width / height of the image, the “new image (52.52)” still requires two clicks because the image is not loaded.

Answer 1

Most likely, you will want to download all the images immediately after the page loads. To do this, I use the following function:

  loadImages = (fxDone) -> doneCount = 0 total = imageURLs.length for imageURL in imageURLs imageName = imageURL.slice(0, imageURL.lastIndexOf(".")) images[imageName] = new Image() images[imageName].onload = -> doneCount++ if doneCount == total fxDone() images[imageName].src = imageURL 

Somewhere outside this function, imageURLs should be defined as a list of, well, image URLs. And images should be initialized as an empty card. I call this in the onload handler and pass the fxDone function to start the work, depending on the uploaded images.

Another option is to upload a click if the image has not yet been uploaded. Please note that this will be a little slower to respond to the first click. I would do it as follows:

 if @images[source]? @width = @images[source].width @height = @images[source].height else @images[source] = new Image() @images[source].onload = -> @width = @images[source].width @height = @images[source].height @images[source].src = source 

Beyond this, @images should initialize a blank card.

Answer 2

Yes, This is because the image was not loaded in the DOM when the .width attribute is called. Everything you did is set by the source. That is why it works after clicking a button. You must load the image in the DOM before the width is determined.

Do you use a framework?

If not, this will probably help. http://www.webdeveloper.com/forum/showthread.php?t=108392

Answer 3

Since you have a jQuery tag, I would use jQuery for this. Indeed, the problem is that the width and height are unknown before loading the image. Do this instead:

 var container = this; var theImg = $('<img/>') .appendTo($(container)) .load(function() { $(container).width(theImg.width()).height(theImg.height()); }) .attr('src', source);