如何获取图像作为数据 URL，没有 canvas API 或文件阅读器 ZDB974238714CA8ACEFFZ34

Question

There are many questions and answers on SO about how to get an image as a data URL, and well, a lot of them use either the canvas API or the FileReader API. Using those APIs for such a simple task is a bit heavy handed, so I've decided to do a QnA post about how it can be done in a much simpler manner.

Answer 1

Here is a simple function that fetches an image from a provided url, and then outputs said image as a data URL.

async function asDataUrl(src) {
   const req = await fetch(src);
   const res = await req.arrayBuffer();

   const u8Buf = new Uint8Array(res);
   let latinBuf: string = '';
   u8Buf.forEach((byte: number): void =>
      { latinBuf += String.fromCharCode(byte); });

   return `data:${req.headers['content-type']};base64,${btoa(latinBuf)}`;
}