将图像缓冲区转换回base64时的错误

Question

我得到一个奇怪的错误，当我将base64字符串转换为图像缓冲区(Buffer.from(image, "base64"))并返回到base64 (.toString("base64"))时，所得到的base64字符串缺少其格式(dataimage/pngbase64而不是data:image/png;base64)以及最后缺少g==。这导致图像"腐败"。而不是渲染，当我把它放在一个<img />在前端。我目前使用的解决方案如下:

image.toString("base64").replace("dataimage/pngbase64", "data:image/png;base64,") + "g=="

但是这远远不是一个最优的解决方案，我不想使用这种变通方法。

这是我缓冲图像的地方(image是base64)，并将其存储在数据库

t.field("createModel", {
type: $name,
args: { input: nonNull(arg({ type: createModelInput.name })) },
resolve: async (_, args) => {
const { image, name, manufacturerId, identifiers } = args.input;
console.log(image) // correct base64 image from frontend
const buffedImage = Buffer.from(image, "base64");
console.log(buffedImage.toString("base64")) // not the same as image above: missing formatting & g== at the end
return await prisma.model.create({
data: {
image: buffedImage,
name,
identifiers,
manufacturer: {
connect: {
id: manufacturerId,
},
},
},
});
},
});

如果需要进一步的信息，请告诉我。

Answer 1

字符串的Base64部分直到,;data:部分是方案，image/png部分是内容类型，base64,部分是之后的的指示符。它是Base64编码的文本。所以当你尝试使用整个字符串作为Base64时，你要求转换非Base64数据。

你首先删除该前缀，因为它不是Base64数据的一部分。它只是data:URI的一部分。