[英]readAsDataURL - Get Image as Base64
I am loading an image using readAsDataURL like this... 我正在使用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...">
I am trying to get the previewed image as base64 data, I have tried to use toDataURL but it is returning an error. 我正在尝试将预览图像作为base64数据获取,我试图使用toDataURL,但它返回错误。
Where am I going wrong? 我要去哪里错了?
Your HTML Element should be a canvas and not an image: 您的HTML元素应该是画布,而不是图像:
<input type="file" onchange="previewFile()"><br>
<canvas id="preview" height="200" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.