Создайте новый ответ из данных изображения base64 с Javascript

Question

Я хочу подделать ответ. У меня есть строковые данные base64 png изображения. Теперь я хочу сделать ответ, но он не работает.

Мой код:

const data = "data:image/png;base64,iVBORw0KGgoAAAA...";
const res = new Response(data, {
      status: 200,
      statusText: "OK",
      headers: {
        "Content-Type": "image/png",
        "Content-Length": data.length
      },
    });

Я провел некоторое исследование, и кажется, что base64 нельзя просто передать ответу. тело. Его нужно преобразовать в буфер или что-то в этом роде.

Это можно сделать в NodeJS, например, Buffer.from(data, 'base64')

Но мой код только в браузере.

Есть ли способ, которым я могу это реализовать.

Answer 1

base64 - закодированная строка, чтобы получить фактическое изображение, вам необходимо преобразовать его в двоичные данные, используя atob. Вот пример:

const b64String = data.split(',')[1];
var byteString = atob(b64String);
var arrayBuffer = new ArrayBuffer(byteString.length);
var intArray = new Uint8Array(arrayBuffer);
for (var i = 0; i < byteString.length; i++) {
    intArray[i] = byteString.charCodeAt(i);
}
var imageBlob = new Blob([intArray], {type: 'image/png'});
const res = new Response(imageBlob, {
  status: 200,
  statusText: "OK",
  headers: {
    "Content-Type": "image/png",
    "Content-Length": imageBlob.size
  },
});