He encontrado algunas respuestas relacionadas con el tema de ¿Cómo puedo convertir una imagen en una cadena Base64 usando JavaScript? . Me di cuenta de que no tienen una imagen en la etiqueta div. ¿Es posible si tuviera la fuente de la imagen?
Respuesta agregada para las personas que quieren hacer referencia
function encodeImageFileAsURL() { var filesSelected = document.getElementById("inputFileToLoad").files; if (filesSelected.length > 0) { var fileToLoad = filesSelected[0]; var fileReader = new FileReader(); fileReader.onload = function(fileLoadedEvent) { var srcData = fileLoadedEvent.target.result; // <--- data: base64 var newImage = document.createElement('img'); newImage.src = srcData; document.getElementById("output").src = newImage.src; alert("Converted Base64 version is " + document.getElementById("output").src); console.log("Converted Base64 version is " + document.getElementById("output").src); } fileReader.readAsDataURL(fileToLoad); } } <input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" /> <img src="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg" id="output" width="100" height="100" style="border-radius: 50%;" />Me gustaría usar la fuente de la imagen para cargar la imagen y encontrar la base 64. ¿Es posible? Además de usar div para crear 1 imagen donde no se puede personalizar.
Creo que quieres hacer esto https://jsfiddle.net/samet19/yv9a4op8/
function encodeImageFileAsURL() { var filesSelected = document.getElementById("inputFileToLoad").files; if (filesSelected.length > 0) { var fileToLoad = filesSelected[0]; var fileReader = new FileReader(); fileReader.onload = function(fileLoadedEvent) { var srcData = fileLoadedEvent.target.result; // <--- data: base64 var newImage = document.createElement('img'); newImage.src = srcData; document.getElementById("output").src = newImage.src; } fileReader.readAsDataURL(fileToLoad); } }