CODEWITHSUNDEEP
javascriptangular
RAHUL KUNDU
RAHUL KUNDU

Reputation: 955

Convert Image URL to base 64 String

I have image URL like this - https://graph.facebook.com/3938027626271800/picture?type=normal.

I want to create a helper function in which I will pass the image URL as a parameter and it will return base 64 string. Right now I am following this approach but this approach converts the URL to base64 but it is not returning the base 64.

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();
}



toDataUrl('https://graph.facebook.com/3938027626271800/picture?type=normal', function(myBase64) {
    console.log(myBase64); // myBase64 is the base64 string
});

Upvotes: 0

Views: 9091

Answers (3)

huan feng
huan feng

Reputation: 8623

What do you mean return base64 not base 64? What's the expected output? It seems your code works well, i wrote in another approach got same results as you did.

async function getBase64ImageFromUrl(imageUrl) {
  var res = await fetch(imageUrl);
  var blob = await res.blob();

  return new Promise((resolve, reject) => {
    var reader  = new FileReader();
    reader.addEventListener("load", function () {
        resolve(reader.result);
    }, false);

    reader.onerror = () => {
      return reject(this);
    };
    reader.readAsDataURL(blob);
  })
}

getBase64ImageFromUrl('https://graph.facebook.com/3938027626271800/picture?type=normal')
    .then(result => console.log(result))
    .catch(err => console.error(err));

Upvotes: 1

Zakariya Pindhariya
Zakariya Pindhariya

Reputation: 66

In HTML file:

<input type="file" (change)="selectedImage($event)" accept="image/*" name="Image">

In TS file:

public async selectedImage(event) {
    const reader = new FileReader();
    if (event.target.files && event.target.files.length) {
        const [file] = event.target.files;
        reader.readAsDataURL(file);
        reader.onload = async () => {
            reader.result // This is Image base64
        };
    }
}

Upvotes: 0

Adassko
Adassko

Reputation: 5343

As images may contain sensitive data, it's not possible to read images loaded from a different domain unless they allow it with CORS by specifying header

Allow-Content-Allow-Origin: *

Your example works just fine because the facebook image provides this header but it will not work for all images from external domains.

Your second thought may be to try to draw an image into canvas and then get data back but luckily for user's safety this is also prohibited: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

The only way is to create a proxy on your domain to download the image from external source, it can already convert it to base64 for you on the backend as well. This is secure because the image is no longer downloaded in the browser user context, will not use his private cookies and IP address and so will not contain any sensitive data.

Upvotes: 0

Related Questions