Using an Image File, I am getting the url of an image, that needs be to send to a webservice. From there the image has to be saved locally on my system.
The code I am using:
var imagepath = $["#imageid"].val[];// from this getting the path of the selected image
that var st = imagepath.replace[data:image/png or jpg; base64"/""];
How to convert the image url to BASE64?
ˈvɔlə
8,0319 gold badges60 silver badges81 bronze badges
asked Mar 4, 2014 at 12:57
2
HTML
JavaScript
function getBase64Image[img] {
var canvas = document.createElement["canvas"];
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext["2d"];
ctx.drawImage[img, 0, 0];
var dataURL = canvas.toDataURL["image/png"];
return dataURL.replace[/^data:image\/[png|jpg];base64,/, ""];
}
var base64 = getBase64Image[document.getElementById["imageid"]];
This method requires the canvas element, which is perfectly supported.
- The MDN reference of
HTMLCanvasElement.toDataURL[]. - And the official W3C documentation.
tauzN
3,4381 gold badge15 silver badges16 bronze badges
answered Mar 4, 2014 at 13:09
ˈvɔləˈvɔlə
8,0319 gold badges60 silver badges81 bronze badges
7
View this answer: //stackoverflow.com/a/20285053/5065874 by @HaNdTriX
Basically, he implemented this function:
function toDataUrl[url, callback] {
var xhr = new XMLHttpRequest[];
xhr.onload = function[] {
var reader = new FileReader[];
reader.onloadend = function[] {
callback[reader.result];
}
reader.readAsDataURL[xhr.response];
};
xhr.open['GET', url];
xhr.responseType = 'blob';
xhr.send[];
}
And in your case, you can use it like this:
toDataUrl[imagepath, function[myBase64] {
console.log[myBase64]; // myBase64 is the base64 string
}];
answered Mar 25, 2017 at 10:26
Abubakar AhmadAbubakar Ahmad
2,4481 gold badge17 silver badges15 bronze badges
5
In todays JavaScript, this will work as well..
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['//lh3.googleusercontent.com/i7cTyGnCwLIJhT1t2YpLW-zHt8ZKalgQiqfrYnZQl975-ygD_0mOXaYZMzekfKW_ydHRutDbNzeqpWoLkFR4Yx2Z2bgNj2XskKJrfw8'].then[console.log]answered Nov 20, 2020 at 12:45
Hai AlalufHai Alaluf
4636 silver badges14 bronze badges
3
This is your html-
Javascript should be-
var can = document.getElementById["imgCanvas"];
var img = document.getElementById["imageid"];
var ctx = can.getContext["2d"];
ctx.drawImage[img, 10, 10];
var encodedBase = can.toDataURL[];
'encodedBase' Contains Base64 Encoding of Image.
answered Mar 4, 2014 at 13:11
0
You Can Used This :
function ViewImage[]{
function getBase64[file] {
return new Promise[[resolve, reject] => {
const reader = new FileReader[];
reader.readAsDataURL[file];
reader.onload = [] => resolve[reader.result];
reader.onerror = error => reject[error];
}];
}
var file = document.querySelector['input[type="file"]'].files[0];
getBase64[file].then[data =>$["#ImageBase46"].val[data]];
}
Add To Your Input onchange=ViewImage[];
answered Jun 10, 2019 at 1:50
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; // {
let image;
image = new Image[];
image.crossOrigin = 'Anonymous';
image.addEventListener['load', function[] {
let canvas = document.createElement['canvas'];
let context = canvas.getContext['2d'];
canvas.width = image.width;
canvas.height = image.height;
context.drawImage[image, 0, 0];
try {
localStorage.setItem['saved-image-example', canvas.toDataURL['image/png']];
} catch [err] {
console.error[err]
}
}];
image.src = URL;
};
imageToBase64['image URL']
ˈvɔlə
8,0319 gold badges60 silver badges81 bronze badges
answered Jan 3, 2020 at 6:42
Asif voraAsif vora
2,6643 gold badges12 silver badges27 bronze badges
Here's the Typescript version of Abubakar Ahmad's answer
function imageTo64[
url: string,
callback: [path64: string | ArrayBuffer] => void
]: void {
const xhr = new XMLHttpRequest[];
xhr.open['GET', url];
xhr.responseType = 'blob';
xhr.send[];
xhr.onload = []: void => {
const reader = new FileReader[];
reader.readAsDataURL[xhr.response];
reader.onloadend = []: void => callback[reader.result];
}
}
answered Dec 12, 2020 at 10:57
SergiSergi
6991 gold badge9 silver badges16 bronze badges
I try using the
top answer, but it occur Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
I found this is because of cross domain problems, the solution is
function convert[oldImag, callback] {
var img = new Image[];
img.onload = function[]{
callback[img]
}
img.setAttribute['crossorigin', 'anonymous'];
img.src = oldImag.src;
}
function getBase64Image[img,callback] {
convert[img, function[newImg]{
var canvas = document.createElement["canvas"];
canvas.width = newImg.width;
canvas.height = newImg.height;
var ctx = canvas.getContext["2d"];
ctx.drawImage[newImg, 0, 0];
var base64=canvas.toDataURL["image/png"];
callback[base64]
}]
}
getBase64Image[document.getElementById["imageid"],function[base64]{
// base64 in here.
console.log[base64]
}];
answered Oct 23, 2020 at 16:05
0
Just wanted to chime in and post how I did it. This is basically @Haialaluf's approach but a bit shorter:
const imageUrlToBase64 = async [url] => {
const data = await fetch[url]
const blob = await data.blob[];
const reader = new FileReader[];
reader.readAsDataURL[blob];
reader.onload = [] => {
const base64data = reader.result;
return base64data
}
}
answered May 15 at 5:44
let baseImage = new Image;
baseImage.setAttribute['crossOrigin', 'anonymous'];
baseImage.src = your image url
var canvas = document.createElement["canvas"];
canvas.width = baseImage.width;
canvas.height = baseImage.height;
var ctx = canvas.getContext["2d"];
ctx.drawImage[baseImage, 0, 0];
var dataURL = canvas.toDataURL["image/png"];
Additional information about "CORS enabled images": MDN Documentation
ˈvɔlə
8,0319 gold badges60 silver badges81 bronze badges
answered May 3, 2018 at 13:10
Edhar DowbakEdhar Dowbak
2,4281 gold badge9 silver badges12 bronze badges
2