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

Answer 2

https://dev.to/ionic/converting-a-base64-string-to-a-blob-in-javascript-35kl

const base64Response = await fetch(`data:image/jpeg;base64,${base64Data}`);

就这么简单。

您可以通过重新创建Response对象并使用.blob()的结果作为正文来设置其他标头：

new Response(await base64Response.blob(), {
status: 200,
statusText: "OK",
headers: {
"Content-Type": "image/png",
...
}
})