最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Encode Animated GIF to Base64 - Stack Overflow

programmeradmin2浏览0评论

I've been searching for a way to encode animated GIF's from a given URL to base64 without using external libraries like jquery (I will use it if absolutely necessary). I have found results to encode static images to base64, but they all use the canvas, and canvas.toDataURL() will only encode a single frame of an animated GIF. Is there a way to encode animated GIF's (or any image for that matter) to base64 without using the canvas?

I've been searching for a way to encode animated GIF's from a given URL to base64 without using external libraries like jquery (I will use it if absolutely necessary). I have found results to encode static images to base64, but they all use the canvas, and canvas.toDataURL() will only encode a single frame of an animated GIF. Is there a way to encode animated GIF's (or any image for that matter) to base64 without using the canvas?

Share Improve this question edited May 23, 2017 at 12:17 CommunityBot 11 silver badge asked Mar 2, 2014 at 6:03 jocopa3jocopa3 7961 gold badge11 silver badges29 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 7

Yes, you can use 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...">

发布评论

评论列表(0)

  1. 暂无评论