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" />