CODEWITHSUNDEEP
javascriptjqueryhtmlimageanimated-gif
Nishan Weerasinghe
Nishan Weerasinghe

Reputation: 349

How to capture animated GIF and show still image?

Is there any way to capture animated image and make it as still image(PNG/JPEG)?

I want to capture below animated image in order to show still image of it. So, that I can add play button to toggle GIF image and still image.

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

Upvotes: 0

Views: 938

Answers (2)

jdphenix
jdphenix

Reputation: 15435

There is not a way to implement modification of animated GIF playback in Javascript reliably*. If a server-side solution is available to you, you could convert the gif to a video supported by <video> and implement controls in that manner.

*There are some projects that use a hack involving <canvas> to grab frames from a gif, but the behavior is not deterministic.

Upvotes: 1

stanze
stanze

Reputation: 2480

Try this Demo

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

Upvotes: 1

Related Questions