1

I want to manipulate the image data of every frame of an animated gif as it plays in the browser, and I want to do it using HTML5 canvas and Javascript. For example, I have an animated gif, and I want to convert every frame to grayscale as it plays in the browser. Is this possible? Whenever I manipulate the image data in an animated gif, only the first frame is shown (correctly manipulated) and the gif won't play any further. This would be a very useful technique if there was a solution for this. Thank you.

EDIT: Is there a way to query the current frame of an animated gif in Javascript, so I can just use putImageData into the image as the animation progresses?

dmoonman
  • 77
  • 1
  • 7

1 Answers1

2

As this page points out, you can use drawImage() to draw the GIF on the canvas, and at the moment it'll draw the current frame from the GIF in Gecko and WebKit -- but not in Opera, and also not according to the spec, so it's not a good idea to rely on this behavior. As far as I know there's no way to get individual frame data from the DOM; I looked into this for a while before writing jsgif (which was mentioned in another answer, but isn't really meant for any sort of practical use as it is -- it's very inefficient, for one).

If you can get away with unpacking the frames on the server and then animating them manually (e.g. like Gmail does), that might be your best option.

Community
  • 1
  • 1
shachaf
  • 8,890
  • 1
  • 33
  • 51
  • The first page you linked is really useful and insightful. I actually was able to convert the canvas images that were based on their respective original images to grayscale easily, and they retain their animations, which is exactly what I was looking for. Opera renders some of them correctly, others not so well; I'll have to be mindful of the spec when I try this out. Thanks! – dmoonman Apr 18 '11 at 01:28