将图像缓冲区转换回 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:的一部分data: URI。