javascript - readAsDataURL-将图像获取为Base64

我正在使用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，但它返回错误。

我要去哪里错了？

最佳答案

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

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

关于javascript - readAsDataURL-将图像获取为Base64，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48264266/