angular - Hur kan jag konvertera bild-URL till en base64-sträng?

Jag har ett problem och jag behöver konvertera en bild, som kommer tillbaka som en URL, till base64. Till exempel, hur denna bild-URL

https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg

kan konverteras till base64.

Jag vet att det finns webbplatser för bildenkodare, som

https://www.base64-image.de/

men jag behöver göra det dynamiskt i min kod.

Svar #1

Detta fungerade för mig:

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

Svar #2

du kan göra så här, och kanske behöver du lösa ursprungskorset om bildens URL inte har samma ursprung

const image = new Image();
image.onload = function(){
  const width = image.width;
  const height = image.height;

  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0);
  const base64 = canvas.toDataURL({format: "png"})
  console.log(base64);
}
  
image.src = 'https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg';