Animierte GIF zu Base64 kodieren

Question

Ich habe nach einer Möglichkeit gesucht, animierte GIFs von einer gegebenen URL nach base64 zu kodieren, ohne externe Bibliotheken wie jquery zu benutzen (ich werde es verwenden, wenn es absolut notwendig ist). Ich habe found results, um statische Bilder zu base64 zu kodieren, aber sie verwenden alle die canvas, und canvas.toDataURL() wird nur ein einzelnes Bild eines animierten GIF kodieren. Gibt es eine Möglichkeit, animierte GIFs (oder ein beliebiges anderes Bild) in Base64 zu codieren, ohne die canvas zu verwenden?

Answer 1

Ja, können Sie FileReader.readAsDataURL()_{^{(example based on MDN web docs)}} verwenden:

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...">