You need to use readAsDataUrl():

function getBase64(event) {
   let me = this;
   let file = event.target.files[0];
   let reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () {
     //me.modelvalue = reader.result;
     console.log(reader.result);
   };
   reader.onerror = function (error) {
     console.log('Error: ', error);
   };
}

HTML

<img id="imageid" src="https://www.google.de/images/srpr/logo11w.png">

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\/?[A-z]*;base64,/);
}

var base64 = getBase64Image(document.getElementById("imageid"));

Special thanks to @Md. Hasan Mahmud for providing an improved regex that works with any image mime type in my comments!

This method requires the canvas element, which is perfectly supported.

• The MDN reference of HTMLCanvasElement.toDataURL().
• And the official W3C documentation.

Your code works as is. When I run that with an imgur url, I get:

"data:image/png;base64,iVBORw0KGgoAAAAN..."

See playground and click "run" to execute the sc ript.

Which means that your server must be returning text/html rather than an image. So make your are calling the correct URL and that the server is returning what it's supposed to because javascript here works just fine.

This worked for me:

TS FILE
base64ImageString;

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


ngOnInit() {
   this.getBase64ImageFromUrl(this.userData.organization_logo).then(base64 => {
      this.base64ImageString = base64;
    })
}

HTML

  <img src='{{ base64ImageString }}' class="logo" />

HTML

<img id="imageid" src="https://www.google.de/images/srpr/logo11w.png">

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\/?[A-z]*;base64,/);
}

var base64 = getBase64Image(document.getElementById("imageid"));

Special thanks to @Md. Hasan Mahmud for providing an improved regex that works with any image mime type in my comments!

This method requires the canvas element, which is perfectly supported.

• The MDN reference of HTMLCanvasElement.toDataURL().
• And the official W3C documentation.

You can use this to get base64 image

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

Then call it like this

getBase64ImageFromUrl('your url')
    .then(result => testImage.src = result)
    .catch(err => console.error(err));

You can do the following...

First, convert the data URL to a blob:

convertDataUrlToBlob(dataUrl): Blob {
    const arr = dataUrl.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);

    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }

    return new Blob([u8arr], {type: mime});
}

Next, use the blob to create an object URL:

const objectURL = URL.createObjectURL(convertDataUrlToBlob(dataUrl));

Finally, use the object URL as the src of your image:

document.getElementById('myImage').src = objectURL;

If you want, you can also convert the Blob into a File:

const file = new File([convertDataUrlToBlob(dataUrl)], filename, {type: `image/${extension}`});

You can use react-native-fs if you are using react-native cli

documentation: https://github.com/itinance/react-native-fs#readfilefilepath-string-encoding-string-promisestring

import RNFS from 'react-native-fs';

//base64 res
var data = await RNFS.readFile( "file://path-to-file", 'base64').then(res => { return res });