JSFiddle - React, Tailwind, and code Playground

by donmccurdy

HTML

<label><input type="radio" name="anima" onclick="freeze_gif(document.getElementById('imgC'))"/>(Frozen) Gif</label>

    <label><input type="radio" name="anima" onclick="create_gif_1(document.getElementById('imgC'));" checked/>Gif 1</label>

    <label><input type="radio" name="anima" onclick="create_gif_2(document.getElementById('imgC'));"/>Gif 2</label>
<br>
<img id='imgC' src='http://25.media.tumblr.com/tumblr_m5kv2t19Mm1rqk3zwo1_400.gif'>

CSS

label {
    display:block;
}

JavaScript

function freeze_gif(i) {
    var c = document.createElement('canvas');
    var w = c.width = i.width;
    var h = c.height = i.height;
    c.getContext('2d').drawImage(i, 0, 0, w, h);
    try {
        i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects
    } catch(e) { // cross-domain -- mimic original with all its tag attributes
        for (var j = 0, a; a = i.attributes[j]; j++)
            c.setAttribute(a.name, a.value);
        i.parentNode.replaceChild(c, i);
    }
}

function create_gif_1(i) {
    var img = document.createElement("img");
    img.src = 'http://25.media.tumblr.com/tumblr_m5kv2t19Mm1rqk3zwo1_400.gif';
    i.parentNode.replaceChild(img, i);
    img.id = i.id;
}

function create_gif_2(i) {
    var img = document.createElement("img");
    img.src = 'http://25.media.tumblr.com/f98046568c229f6101db1ea50fbe6a70/tumblr_mnqs9nA4XB1qg6rkio1_500.gif';
    i.parentNode.replaceChild(img, i);
     img.id = i.id;
}