Javascript 以编程方式停止 GIF 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3688460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stopping GIF Animation Programmatically
提问by Karussell
I am developing a Twitter application which references to the images directly from Twitter. How can I prevent animated gifs from being played?
我正在开发一个 Twitter 应用程序，它直接从 Twitter 引用图像。如何防止播放 gif 动画？
Using window.stop()at the end of the page does not work for me in Firefox.
window.stop()在页面末尾使用在 Firefox 中对我不起作用。
Is there a better JavaScript hack? Preferable this should work for all browsers
有更好的 JavaScript hack 吗？最好这应该适用于所有浏览器
采纳答案by Karussell
This is not a cross browser solution but this worked in firefox and opera (not in ie8 :-/). Taken from here
这不是跨浏览器的解决方案，但它适用于 Firefox 和 Opera（不适用于 ie8 :-/）。采取从这里
[].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);
}
}
回答by Krasimir
Inspired by the answer of @Karussell I wrote Gifffer. Check it out here https://github.com/krasimir/gifffer
受到@Karussell 回答的启发，我写了 Gifffer。在这里查看https://github.com/krasimir/gifffer
It automatically adds stop/play control on top of your Gif.
它会自动在您的 Gif 顶部添加停止/播放控制。
回答by Makaze
In an attempt to improve on Karussell's answer, this version should be cross-browser, freezes all images including those that have an incorrect file ending (e.g. automated image loading pages), and does not conflict with the function of the original image, allowing the original to be right clicked as if it were moving.
为了改进 Karussell 的答案，这个版本应该是跨浏览器的，冻结所有图像，包括那些文件结尾不正确的图像（例如自动图像加载页面），并且不与原始图像的功能冲突，允许原件被右键单击，就好像它在移动一样。
I would make it detect animation but that is much more intensive than just freezing them regardless.
我会让它检测动画，但这比仅仅冻结它们要密集得多。
function createElement(type, callback) {
var element = document.createElement(type);
callback(element);
return element;
}
function freezeGif(img) {
var width = img.width,
height = img.height,
canvas = createElement('canvas', function(clone) {
clone.width = width;
clone.height = height;
}),
attr,
i = 0;
var freeze = function() {
canvas.getContext('2d').drawImage(img, 0, 0, width, height);
for (i = 0; i < img.attributes.length; i++) {
attr = img.attributes[i];
if (attr.name !== '"') { // test for invalid attributes
canvas.setAttribute(attr.name, attr.value);
}
}
canvas.style.position = 'absolute';
img.parentNode.insertBefore(canvas, img);
img.style.opacity = 0;
};
if (img.complete) {
freeze();
} else {
img.addEventListener('load', freeze, true);
}
}
function freezeAllGifs() {
return new Array().slice.apply(document.images).map(freezeGif);
}
freezeAllGifs();
回答by Jason
This is a bit of a hack, but you could try loading the gif into an iframe and calling window.stop()from inside the iframe (on itself) once the image has loaded. This prevents the rest of the page from stopping.
这有点麻烦，但是您可以尝试将 gif 加载到 iframe 中，并window.stop()在加载图像后从 iframe 内部（在其自身上）调用。这可以防止页面的其余部分停止。
