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/…"

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;

  img.onerror = (err) => {
  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?