HTML5 Canvas toDataUrl - 上传gif解决方法 [英] HTML5 Canvas toDataUrl - Upload gif workaround

问题描述

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

I'm wondering if it's possible to preview a .gif image within a canvas element and uploaded it as an 'image/gif' file type. I found this SO question, but it incorrectly mentions .gif in the title but no references on how to deal with canvas and gifs within any of the responses/comments.

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

According to the docs, 'image/gif' is not an accepted type for toDataUrl. Is there a workaround / lib which will allow me to place a gif within a preview canvas and upload the canvas file as a gif?

推荐答案

< h2> 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...">

这篇关于HTML5 Canvas toDataUrl - 上传gif解决方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！