-2

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

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

这是一个 gif，但在显示时我不想显示 gif。实际上，我正在使用summernote。

4

5 回答 5

3

如果您的浏览器支持<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);
});

现场演示（激活 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.

于 2014-09-05T09:13:57.950 回答
0

要停止所有 gif 动画，您可以使用Makaze 在此 StackOverflow 答案中发布的 freezeAllGifs() 函数。您应该在页面加载后执行它，这应该会停止所有动画 gif。

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

于 2014-09-05T08:03:57.127 回答
0

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

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

于 2014-09-05T07:33:55.907 回答
0

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

你想用不以 .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

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

于 2014-09-05T07:49:17.573 回答
-1

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

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

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

于 2014-09-05T08:04:35.857 回答