使用 Javascript 从 base64 图像数据创建新的响应

Question

我想伪造一个回复。我有一个 png 图像的 base64 字符串数据。现在我想回复但是没有用

我的代码：

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
  },
});

使用 Javascript 从 base64 图像数据创建新的响应

Create new Response from base64 image data with Javascript

javascript

base64

png

response