Convert remote image to base64string and save locally

Hi Guys,

I am trying to create a directive to convert a remote image to base64string and save the image locally.

The case is when I try to load the img and I getting an error:
Failed to load resource: The requested URL was not found on this server. (file:///var/containers/Bundle/Application/8BDC2BF9-427D-4DF7-9D21-86F33A6FA20E/test.app/www/%22https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fproject-44264409.appspot.com%2Fo%2Fimages%252F1RUYIS…"

Here is the code:

getImageBase64String(url: string) {
return new Promise( (resolve, reject) => {
 
  // Convert image to base64 string
  var canvas = document.createElement('CANVAS'),
    ctx = canvas.getContext('2d'),
    img = new Image;

  img.crossOrigin = 'Anonymous';

  img.onload = () => {
    var dataURL: any = null;
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img, 0, 0);

    // set image quality
    dataURL = canvas.toDataURL('image/jpeg', 0.9);
    canvas = null;
    resolve(dataURL);
  };

  img.onerror = (err) => {
    reject(err);
  };
  console.log("|||||||||||||||||||||||||||");
  console.log(url);
  console.log("|||||||||||||||||||||||||||");
  img.src = url;
});

}

I’ve checked the url and its the right one when img.src = url, but for some reason the error is adding the file:/// part to the path.
I don’t understand why.

Any help, please?