如何捕捉GIF动画和显示静态图像

How to capture animated GIF and show still image?

本文关键字：显示 静态 图像 动画 何捕捉 GIF      更新时间：2023-09-26

是否有任何方法捕获动画图像并使其成为静止图像(PNG/JPEG)?

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

: 

<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代码

试试这个Demo

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

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

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

相关文章：