Is there a way to create an Image from canvas.getImageData?

[rich]

Warning: Question posted without any form of testing by me, in the hope someone has already done it

 

You can get all the pixel data from a canvas easily with getImageData.

 

But is there any way to turn that data back into something you can use in a normal Image() object? (which is then maybe added to the DOM).

[Gio]

You can do that without getImageData(), with a data URL:

img.src = canvas.toDataURL();

On some (but not all) browsers, assigning a value to img.src doesn't have an immediate effect though, it may happen on the next idle cycle. Just mentioning it because that's caught me out a couple of times.

[rich]

Does it still fire an onload event when you set the src this way?

[Gio]

In my experience it does, but again it may or may not happen immediately depending on the browser. So I'd listen for the load event first, then set the src, just in case your browser does trigger the event right away (if I remember correctly firefox does this).

[Ezelia]

In my experience it does, but again it may or may not happen immediately depending on the browser. So I'd listen for the load event first, then set the src, just in case your browser does trigger the event right away (if I remember correctly firefox does this).

I can't remember where I read that but I think that the specs say : src attribute have to be set before the onload attribute so the event can fire correctly.

 

[rich]

I can't remember where I read that but I think that the specs say : src attribute have to be set before the onload attribute so the event can fire correctly.

 

Pretty sure it's the other way around event callback first, src last once everything else is set-up as it triggers everything at that point.

[Ezelia]

Pretty sure it's the other way around event callback first, src last once everything else is set-up as it triggers everything at that point.

 

oh my mistake I wanted to say "src attribute have to be set AFTER the onload attribute"

[p01]

FYI canvas.toDataURL() generates a PNG by default, but you can pass a MIME type as argument, e.g. "image/png" or "image/jpeg" in which case some browsers might take an optional second argument between 0 and 1 for the quality setting of the JPEG.