javascript - 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 元素应该是 Canvas 而不是图像:

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