HTMLImageElement is in "broken" state.

I have a serialized image, which I deserialize from its base64 encoded URL. The encoded URL is correctly serialized and known to work in Browsers and my other SDL-based runtime.

Error and Description

Uncaught InvalidStateError: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The HTMLImageElement provided is in the ‘broken’ state.

Steps to reproduce

var img = new Image();
img.src = 'data:image/png;base64,.....'

img.onload = function() {
    somecanvas.getContext('2d').drawImage(img); // will fail
};

How can I fix this?

// EDIT: corrected the example to avoid confusions

<bountysource-plugin>

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource. </bountysource-plugin>

[cookiengineer]

I think the problem is related to when you draw the image on the canvas. If the image is set via img.src="data url" and the onload callback is fired, the image is not yet really ready for drawing. In my case I had to modify the Image.toString() method in order to avoid the problem and get it integrated with data urls. Note that it’s important to lazy load the buffer at least to times in my cases, because the first one will result in above problem.

Might be possible for others to get around the broken state by using setTimeout(draw, 0) inside the img.onload but I really think this is a harsh bug and isn’t what the onload API intends to offer.

[cookiengineer]

I think I traced down the bug further in upstream Blink:

Related lines:

• src fails to get content because of missing width
• this fails because of sourceImageStatus failing

Somewhere between ImageResource.get() it fails, but I have no effing clue why. They always return pointers in their dummy methods and ImageResource, ImageLoader, Image, HTMLImageElement use all m_image as a property name -_- so I have no effing clue what’s going on there.

But maybe this helps nail the bug further down. My partly blind guess is that the ImageLoader for data URLs does not fire the ImageResource::finishOnePart() method or the ImageResource::updateImage(true) soon enough to be directly drawn because that will eventually lead to the ImageObserver not being notified correctly and the onload to be triggered because of the width checks (heights are not checked anywhere, lol).

Maybe you can produce a test case for this by using this and toggle on/off the width/height properties to further trace the bug down the spaghetti code:

let img = new Image();

img.width = 1337;
img.height = 13.37;

img.onload = function() {
  context.drawImage(this, 0, 0);
};

img.src = 'data:...';