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";）。

否则画布会被污染＆＃34;并toDataURL抛出SecurityError。

Answer 2

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

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

Answer 3

不确定我理解这个问题。

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

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

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

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

AddType image/gif yourfilename

如果主持人允许，这应该有用。

Answer 4

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

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

Answer 5

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

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

DEMO：http://jsfiddle.net/MEaWP/2/

将gif URL显示为仅图像

5 个答案: