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 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.
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.