javascript - HTML5 Canvas toDataUrl - 上传 gif 解决方法

Question

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

根据文档，'image/gif' 不是 toDataUrl 可接受的类型。是否有解决方法/库允许我在预览 Canvas 中放置 gif 并将 Canvas 文件作为 gif 上传？

Answer 1

FileReader.readAsDataURL()

来自 mozilla.org

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 = "";
  }
}

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