2

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.

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?

Community
  • 1
  • 1
Mike Purcell
  • 19,847
  • 10
  • 52
  • 89

1 Answers1

2

FileReader.readAsDataURL()

From 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...">
wolfhammer
  • 2,641
  • 1
  • 12
  • 11