CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
John
John

Reputation: 6268

Drawing first frame of an animated GIF to an HTML5 Canvas

When I paint a gif image to a canvas element before it finishes loading the entire gif, it just a white area. But if I do 

window.stop()

Before it finishes, it draws the gif in the element. The problem is that stopping the entire page stops all gifs instead of just the specific one I want to copy over to canvas. How can I paint what is currently loaded in a gif to a canvas element before it finishes loading the entire gif. I was thinking of maybe putting it in an iframe and stopping the iframe or some other trick like that but I would also like some ideas or solutions that you guys have to offer.

edit: Is there a way to detect how much of the gif has been downloaded in a percentage using javascript? So that I can know that at least the first frame was downloaded?

Upvotes: 4

Views: 1783

Answers (1)

Simon Sarris
Simon Sarris

Reputation: 63812

How can I paint what is currently loaded in a gif to a canvas element before it finishes loading the entire gif

You can't.

It's not a bug per se. The spec dictates that:

If the image argument is an HTMLImageElement object that is not fully decodable ... then the implementation must return without drawing anything.

The reason it works when you do stop() the image is technically declared fully available. Or more accurately in plain English, "as available as its going to get."

Your best bet assuming you want this functionality is to make many small images out of the gif's frames and use them as they load. Any other solution (such as breaking up the gif on the fly) would necessitate loading the entire gif first, which you seem to have deemed unacceptable.

Upvotes: 3

Related Questions