readAsDataURL - 以Base64格式获取图像

Question

我正在使用readAsDataURL加载图像......

function previewFile() {

	console.log('Start Function')
  
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
  
  canvas = document.getElementById("preview");
  imageData = canvas.toDataURL("image/jpeg");
  
  console.log(imageData)
  
}

<input type="file" onchange="previewFile()"><br>
<img id="preview" src="https://dummyimage.com/600x400/000/fff" height="200" alt="Image preview...">

我正在尝试将预览图像作为base64数据，我尝试使用toDataURL，但它返回错误。

我哪里错了？

Answer 1

您的HTML元素应该是画布而不是图像：

<input type="file" onchange="previewFile()"><br>
<canvas id="preview" height="200" />