HTML5 Canvas toDataUrl - 上传 gif 解决方法

【问题标题】：HTML5 Canvas toDataUrl - Upload gif workaroundHTML5 Canvas toDataUrl - 上传 gif 解决方法
【发布时间】：2015-09-25 16:03:03
【问题描述】：

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

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

【问题讨论】：

标签： javascript html canvas gif

【解决方案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...">

【讨论】：