我可以将src img属性指定为Blob文件还是以base64编码的图像？

Question

I was wonder if somehow i could get the image content of a url and transform it into a base64 or a blob file and append it to the src attribute ?

And if this is possible how can i do this in the angular way ? I tried to do something like this and its not working

    const fileReader = new FileReader();
    let userAvatar: string;
    this.avatarSubject = new BehaviorSubject(this.userService.getAvatar(this.channelId));
    this.avatarSubject.subscribe(res => {
      userAvatar = res;
      const binaryImg = atob(userAvatar);
      const length = binaryImg.length;
      const buffer = new ArrayBuffer(length);
      const uint = new Uint8Array(buffer);
      const blob = new Blob([uint], {type: 'image/jpeg'});
      fileReader.readAsDataURL(blob);
    }).unsubscribe();

Answer 1

You can set an image src to a Base64 dataURI, not to a blob though.

You can retrieve the image as a blob, then convert it to a dataURI, if it doesn't violate any cors policy.

(async ()=>{
  var url = 'https://imgur.com/gallery/rh5O7wN';
  var blob = await urlToBlob(url);
  var datauri = await blobToDataURI(blob);
  document.getElementById('img').src = datauri;
})();

function urlToBlob(url) {
  return new Promise(done => {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = 'arraybuffer';
    xhr.addEventListener('load', function() {
      if (xhr.status === 200) done(new Blob([xhr.response]));
    })
    xhr.send();
  });
}

function blobToDataURI(blob) {
  return new Promise(done => {
    var a = new FileReader();
    a.onload = e => done(e.target.result);
    a.readAsDataURL(blob);
  });
}