編碼動畫GIF到Base64

Question

我一直在尋找一種方法來將動畫GIF從給定的URL編碼到base64，而無需使用像jquery這樣的外部庫（如果絕對必要，我會使用它）。我有found results將靜態圖像編碼爲base64，但它們全部使用canvas，而canvas.toDataURL()只會對動畫GIF的單個幀進行編碼。有沒有辦法將動畫GIF（或任何圖像）編碼爲base64而不使用canvas？

Answer 1

是的，你可以使用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...">