Ottenere un URL di dati da un'immagine con le Fetch API di JavaScript

In questo articolo vedremo come creare una funzione che reperisce un'immagine remota e restituisce un URL di dati con JavaScript.

Possiamo utilizzare le Fetch API per ottenere i byte dell'immagine e la classe FileReader per ottenere l'URL di dati.

async function imageUrlToDataUrl(imageUrl) {
  const response = await fetch(imageUrl);
  const blob = await response.blob();

  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}

Possiamo usare la funzione in questo modo:

(async () => {
  const dataUrl = await imageUrlToDataUrl('https://example.com/image.jpg');
  console.log(dataUrl);
})();

Conclusione

Tramite le Fetch API è possibile ottenere i dati di un'immagine e quindi trasformarli in un URL di dati che possiamo riutilizzare.