javascript - 使用 javascript 和 canvas 标签禁用动画 gif？

Question

这是我在 chrome 中工作的一种方式:http://jsfiddle.net/quickredfox/7k3jN但是您会在尝试实现该跨浏览器时遇到一些问题，即:安全限制。

我的示例的问题在于它用 Canvas 标签替换了原始图像。太糟糕了，我放弃了所有通常适用于通常应该存在的内容的 CSS 规则。

我最初的想法是用 canvas.toDataURL() 的输出替换图像作为新 Image() 对象上的 src 属性，但是由于图像托管在另一个域上，我遇到了安全限制错误。再一次，这很糟糕。

谁能想出一个不错的方法来做到这一点，它既不糟糕又能很好地防止在浏览器中显示的一组推文中出现动画头像？

哦，我的意思是完全 100% 在浏览器中，没有服务器端支持。

Answer 1

这很可能只是工作量太大，但我会提一下以防万一。

如果您使用 jQuery 执行图像替换，您可以使用一个插件，它允许您将一个对象的 CSS 复制到另一个对象:

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

插入您的 Canvas 元素，从 GIF 复制源 CSS 并删除 GIF。

它使用 window.getComputedStyle 的事实应该有望意味着您获得隐含的 CSS 以及通过类名发生的事情。事实上，获取该插件的代码并将其转换为不需要 jQuery 的东西可能很容易。

希望这对您有所帮助或启发!