我一直在寻找一种不使用外部库(如jquery)的方法,将给定URL的动态GIF编码为base64。我已经找到了结果,可以将静态图像编码为base64,但它们都使用canvas
,而canvas.toDataURL()
只会编码一个动态GIF的单个帧。有没有一种方法可以将动态GIF(或任何图像)编码为base64,而无需使用canvas
?
我一直在寻找一种不使用外部库(如jquery)的方法,将给定URL的动态GIF编码为base64。我已经找到了结果,可以将静态图像编码为base64,但它们都使用canvas
,而canvas.toDataURL()
只会编码一个动态GIF的单个帧。有没有一种方法可以将动态GIF(或任何图像)编码为base64,而无需使用canvas
?
是的,您可以使用 FileReader.readAsDataURL()
(基于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...">