애니메이션화된 GIF에서 Base64로 인코딩

Question

저는 jquery와 같은 외부 라이브러리를 사용하지 않고 주어진 URL에서 base64로 애니메이션 GIF를 인코딩하는 방법을 찾고 있습니다 (필자는 꼭 필요한 경우 사용하겠다). 나는 found results으로 base64에 정적 이미지를 인코딩하지만 모두 canvas을 사용하고 canvas.toDataURL()은 애니메이션 GIF의 단일 프레임 만 인코딩합니다. canvas을 사용하지 않고 애니메이션 GIF (또는 해당 이미지의 모든 이미지)를 base64로 인코딩 할 수 있습니까?

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