document.addEventListener('keydown', freeze_gifs_on_escape, true);
function freeze_gifs_on_escape(e) {
if (e.keyCode == 27 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
[].slice.apply(document.images).filter(is_gif_image).map(freeze_gif);
}
}
function is_gif_image(i) {
return /^(?!data:).*\.gif/i.test(i.src);
}
function freeze_gif(i) {
var c = document.createElement('canvas');
var w = c.width = i.width;
var h = c.height = i.height;
c.getContext('2d').drawImage(i, 0, 0, w, h);
try {
i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects
} catch(e) { // cross-domain -- mimic original with all its tag attributes
for (var j = 0, a; a = i.attributes[j]; j++)
c.setAttribute(a.name, a.value);
i.parentNode.replaceChild(c, i);
}
}
That privilege could even involve a manual extension review process in the Chrome extension gallery, for all I care; it is jarring that we can't fix user experience bugs like this due to the enforced security model.
Edit: As suggested in the tip below, we don't really need to
.toDataURL
the image, although that gives the best results on pages that apply css styling to img tags that we won't inherit to the canvas tag. The script has been updated to work everywhere; direct install link here.
Hi,
ReplyDeleteI just found your article while searching how to stop a GIF.
I've upgraded your script to work even if the image is not loaded or comes from another domain: http://pastebin.fr/8425
Hope it helped you ;)
Ah; I got the impression that the error happened at rawImage, not in toDataURL. Thanks! Script updated with a similar patch.
ReplyDelete