HTML5 Canvas toDataUrl - 上传gif解决方法

Question

我想知道是否可以在canvas元素中预览.gif图像并将其作为'image / gif'文件类型上传。我发现了这个SO question，但它错误地提到了标题中的.gif文件，但没有提及如何在任何回复/评论中处理画布和gif。

根据文档，'image / gif'不是toDataUrl的可接受类型。是否有一个变通方法/ lib，它允许我在预览画布中放置一个gif并将画布文件作为gif上传？

Answer 1

FileReader.readAsDataURL（）

来自mozilla.org

＆＃13;

＆＃13;

function previewFile() {
  var preview = document.querySelector('img');
  var file = document.querySelector('input[type=file]').files[0];
  var reader = new FileReader();

  reader.onloadend = function() {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

＆＃13;

<input type="file" onchange="previewFile()">
<br>
<img src="" height="200" alt="Image preview...">

＆＃13;

＆＃13;

＆＃13;