如何捕获动画 GIF 并显示静止图像？答案

【问题标题】：How to capture animated GIF and show still image?如何捕获动画 GIF 并显示静止图像？
【发布时间】：2015-05-15 05:38:25
【问题描述】：

有什么方法可以捕捉动画图像并将其制作为静止图像（PNG/JPEG）？

我想捕捉下面的动画图像以显示它的静止图像。所以，我可以添加播放按钮来切换 GIF 图像和静止图像。

HTML：

<div class="image_wrapper">
    <img class="animated_gif" src="http://i.imgur.com/zY4nD.gif" />
    <img class="still_img" src="" />
</div>
<a href="#" class="play_btn">Play/Pause</a>

CSS：

.image_wrapper{
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: #ddd;
    width: 150px;
    height: 150px;
    padding:10px;
}

.animated_gif{
    width:100%;
    height:150px;
    display:none;
}

.play_btn{
    background:#2FB82B;
    padding:5px;
    text-decoration:none;
    color:white;
    font-weight:bold;
    border-radius:4px;
    margin: 42px;
    position:relative;
    top:10px;
}

.play_btn:hover{
    background:#4DD849;
}

JSFiddle Code

【问题讨论】：

标签： javascript jquery html image animated-gif

【解决方案1】：

试试这个Demo

$('.play_btn').on('click', function() {
    $('img').toggle();
})

【讨论】：

是的。这可以。但是，我想将 GIF 图像捕获为静止图像。

【解决方案2】：

没有一种方法可以可靠地在 Javascript 中实现对动画 GIF 播放的修改*。如果您可以使用服务器端解决方案，您可以将 gif 转换为 <video> 支持的视频并以这种方式实现控件。

*有些项目使用涉及<canvas> 的hack 从gif 抓取帧，但行为不是确定性的。

【讨论】：