仅将 gif URL 显示为图像

Question

是否有任何简单的方法可以将 GIF 显示为仅在网页上的图像。 假设用户已发布

http://netdna.webdesignerdepot.com/uploads/2013/04/Dvdp3.gif

这是一个 gif，但在显示时我不想显示 gif。其实我用的是summernote。

Answer 1

如果您的浏览器支持<canvas>，您可以利用它来显示冻结的 gif：

<canvas id="imageCanvas"></canvas>

Javascript：

var canvas = document.getElementById("imageCanvas"),
    image = new Image();

image.src = "/path/to/image.gif";
image.addEventListener("load", function() {
    canvas.width = image.naturalWidth;
    canvas.height = image.naturalHeight;
    canvas.getContext("2d").drawImage(image, 0, 0);
});

Live demo（激活 Javascript 面板，禁用 CSS 面板）。

在 IE9-11、Chrome 和 Firefox 中测试。

更新

使用上面的技术，如果你真的想要一个<img> 元素而不是<canvas>，你可以做更多的事情：

var preloadImage = new Image(),
    finalImage = new Image(),
    canvas = document.createElement("canvas");

preloadImage.src = "/path/to/image.gif";
preloadImage.addEventListener("load", function() {
    canvas.width = preloadImage.naturalWidth;
    canvas.height = preloadImage.naturalHeight;
    canvas.getContext("2d").drawImage(image, 0, 0);

    finalImage.src = canvas.toDataURL("image/png");
    // Append to the DOM. Choose the parent you want.
    document.body.appendChild(finalImage);
});

请注意，画布甚至没有附加到文档中，就像 preloadImage。

这仅在以下情况下有效：

• 图像的来源满足同源策略或
• 服务器允许跨域请求，并且加载图像时启用了crossOrigin (preloadImage.crossOrigin = "anonymous";)。

否则画布被“污染”并且toDataURL 抛出SecurityError。

Answer 2

不确定我是否理解这个问题。

你想用不以 .gif 结尾的 url 显示这个 gif 吗？

如果是，您可以调整标题中的 mimetype。

浏览器不关心 URL 中显示的扩展名。它只关心描述如何处理数据的 MIME 类型。以 'text/plain' MIME 类型发送的 html 页面将显示源代码，就像它是 txt 一样，它不会被解释为 html。 您可以将 gif 重命名为 .jpeg 并将其发送到具有“image/gif”mimetype 的浏览器。

如果您使用的是 apache，您可以使用 .htaccess 更改 MIME 类型。在图像文件夹中添加一个名为 .htaccess 的文本文件，其中包含此文本：

AddType image/gif yourfilename

如果您的主机允许，这应该可以工作。

Answer 3

要停止所有 gif 动画，您可以使用 the freezeAllGifs() function posted by Makaze in this StackOverflow answer。您应该在页面加载后执行它，这应该会停止所有动画 gif。

这可能不是一个很好的解决方案，但我能想到的唯一另一个是服务器端脚本，它会下载所有发布的 gif，转换它们，然后用本地转换文件的 url 替换原始链接服务器。

Answer 4

GIF 是一种与 JPEG 格式截然不同的格式。 当用户发布它时，您必须将其转换为所需的格式，否则可能会失去透明度等。 无法将 gif 显示为另一种格式。

或者只是让它显示为 GIF，为什么要更改它？

Answer 5

您可以使用这种低效的解决方案，但它确实有效！

setTimeout(function() {
    setInterval(function() {
        $('#img1').attr('src',$('#img1').attr('src'))
    },1)
}, 2000)

演示：http://jsfiddle.net/MEaWP/2/