Encode animated GIF on Base64

Question

I was looking for a way to encode an animated GIF from a given base64 url ​​without using external libraries like jquery (I will use it if absolutely necessary). I found results for encoding static images on base64, but they all use canvas , and canvas.toDataURL() will encode only one frame of an animated GIF. Is there a way to encode an animated GIF (or any image for that matter) on base64 without using canvas ?

Answer 1

Yes, you can use FileReader.readAsDataURL() _{^{(the example is based on MDN web docs)}} :

 function previewFile() { var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.addEventListener("load", function () { var base64gif = reader.result; // your gif in base64 here preview.src = base64gif; document.getElementById('base64').innerHTML = base64gif; }, false); if (file) { reader.readAsDataURL(file); } } 

 Upload your gif:<br/> <input type="file" onchange="previewFile()"><br/> <div id="base64" style="max-width: 200px; float: left; overflow-wrap: break-word;"></div> <img src="" height="200" alt="Gif preview...">