xxxxxxxxxx
let fileInput = document.getElementById('fileInput')
fileInput.addEventListener('change', async function(){
let url = await base64Url(fileInput.files[0])
console.log(url)
})
function base64Url(file){
return new Promise(function(resolve,reject){
const reader = new FileReader();
reader.onload = () => resolve(reader.result)
reader.onerror = (error) => reject(error)
reader.readAsDataURL(file);
})
}
xxxxxxxxxx
const getBase64FromUrl = async (url) => {
const data = await fetch(url);
const blob = await data.blob();
return new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
const base64data = reader.result;
resolve(base64data);
}
});
}
getBase64FromUrl('your_image_url_here').then(console.log)
xxxxxxxxxx
/** image onto base64 */
export default function convertToBase64(file){
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = () => {
resolve(fileReader.result)
}
fileReader.onerror = (error) => {
reject(error)
}
})
}
xxxxxxxxxx
function urlToBase64(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const dataURL = canvas.toDataURL('image/png');
resolve(dataURL);
};
img.onerror = reject;
img.src = url;
});
}
// Example usage:
const imageUrl = 'https://example.com/image.jpg';
urlToBase64(imageUrl).then((base64) => {
console.log('Base64 representation:', base64);
}).catch((error) => {
console.error('Error:', error);
});
xxxxxxxxxx
function encodeImageFileAsURL(element) {
var file = element.files[0];
var reader = new FileReader();
reader.onloadend = function() {
console.log('RESULT', reader.result)
}
reader.readAsDataURL(file);
}
<input type="file" onchange="encodeImageFileAsURL(this)" />
convert image url to base64 url in javascript
xxxxxxxxxx
const getBase64FromUrl = async (url) => {
const data = await fetch(url);
const blob = await data.blob();
return new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
const base64data = reader.result;
resolve(base64data);
}
});
}
getBase64FromUrl('https://lh3.googleusercontent.com/i7cTyGnCwLIJhT1t2YpLW-zHt8ZKalgQiqfrYnZQl975-ygD_0mOXaYZMzekfKW_ydHRutDbNzeqpWoLkFR4Yx2Z2bgNj2XskKJrfw8').then(console.log)
Run code snippet
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<input type="file" onchange="encodeImageFileAsURL(this)" />
<script>
function encodeImageFileAsURL(element) {
let file = element.files[0];
let reader = new FileReader();
reader.onloadend = function() {
document.write('RESULT: ', reader.result);
}
reader.readAsDataURL(file);
}
</script>
</body>
</html>
xxxxxxxxxx
// Assuming you have an image element with the id "myImage"
var image = document.getElementById("myImage");
// Create a canvas element
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
// Set the canvas dimensions to match the image
canvas.width = image.width;
canvas.height = image.height;
// Draw the image onto the canvas
context.drawImage(image, 0, 0);
// Get the base64 data from the canvas
var base64 = canvas.toDataURL();
// Print the base64 data in the console
console.log(base64);