Disable animated gifs using javascript and the canvas tag?

Here's one way i've made work in chrome: http://jsfiddle.net/quickredfox/7k3jN but you'll run into some problems trying to implement that cross-browser, namely: security restrictions.

The problem with my example is that it replaces the original image with a canvas tag. That sucks, I开发者_如何学C loose all CSS rules that would normally work for what should normally be there.

My original idea was to replace the image with the output of canvas.toDataURL() as the src attribute on a new Image() object, but seeing as the image is hosted on another domain I get security restriction errors. Again, that sucks.

Can anyone think of a nice way to do this that doesn't suck and would work well for preventing animated avatars on a collection of tweets displayed in a browser?

Oh, and I mean totally 100% in the browser, no server-side assist.

There's a large chance that this is just too much heavy lifting, but I'll mention it just in case.

If you use jQuery to perform the image replacement, there's a plugin that you can use which allows you to copy the CSS of an object to another object:

http://upshots.org/?p=192

Insert your canvas element, copy the source CSS from the GIF and remove the GIF.

The fact that it uses window.getComputedStyle should hopefully mean that that you get implied CSS as well as stuff that happens via class name. In fact, it's probably easy enough to take the code for that plugin and turn it into something that doesn't require jQuery.

Hope this helps or inspires!

Since these images are apparently being hosted on Twitter and Twitter does not (I checked) set the CORS headers (the bastards!), you cannot do this browser side.

If it were me, I would set up a server on AWS's free tier that would run PIL and flatten the image to PNG.

If you have control over the server that is hosting images, then there's about a 10% chance that putting CORS headers will work. Without it, any solution that does work would also be a security hole (and therefore a bug in the browser).

EDIT: sometimes, long shots pay off: CORS is supposed to work!