将动画GIF编码为Base64

Question

I've been searching for a way to encode animated GIF's from a given URL to base64 without using external libraries like jquery (I will use it if absolutely necessary). I have found results to encode static images to base64, but they all use the canvas , and canvas.toDataURL() will only encode a single frame of an animated GIF. Is there a way to encode animated GIF's (or any image for that matter) to base64 without using the canvas ?

Answer 1

Yes, you can use FileReader.readAsDataURL() _{^{(example 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...">