<input type="file" id="file-input">
<button id="convert-button">Convert to Base64</button>
<div id="output"></div>
<img id="imageBase64"/>
const fileInput = document.getElementById("file-input");
const convertButton = document.getElementById("convert-button");
const outputDiv = document.getElementById("output");
var base64String = '';
fileInput.addEventListener("change", () => {
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = () => {
base64String = btoa(reader.result);
};
reader.readAsBinaryString(file);
});
convertButton.addEventListener("click", () => {
let imgElement = document.getElementById("imageBase64");
imgElement.src = `data:image/png;base64,${base64String}`;
console.log(base64String);
// Do something with the base64 string
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.