Question

我一直在寻找一种方法来将动画GIF从给定的URL编码到base64，而不使用像jquery这样的外部库（如果绝对必要，我会使用它）。我有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...">

将动画GIF编码为Base64

1 个答案: