JSFiddle - React, Tailwind, and code Playground

by joseeight

HTML

<img src="http://i.imgur.com/3EGP6.gif" />
<img id="test" />

JavaScript

/*
    A bit hacky, but basically by making the XHR to the same image source
    we can get the data typed, in this case ArrayBuffer.
*/
var img = document.querySelector('img'), xhr = new XMLHttpRequest();
xhr.open('GET', img.src, true);
xhr.responseType = 'arraybuffer';
xhr.addEventListener('load', handleBuffer, false);
xhr.send();
//
function handleBuffer (data) {
    var buffer = data.target.response;
    //Testing the data (sanity check by setting the test image to the array buffer we got)
    var test_img = document.getElementById('test');
    test_img.src = window.URL.createObjectURL(
        new Blob([new Uint8Array(buffer)], {type: 'image/gif'})
    );
    document.appendChild(test_img);
}