Bug when converting image buffer back to base64

Question

I am getting a strange bug where, when I convert a base64 string to an image buffer ( Buffer.from(image, "base64") ) and back to base64 ( .toString("base64") ) the resulting base64 string is missing its formatting ( dataimage/pngbase64 instead of data:image/png;base64 ) as well as missing g== at the end. This results in the image being "corrupt" and not rendering when I put it in an <img /> in the frontend. The current workaround I'm using is the following:

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

but this is far from an optimal solution and I would like to not use this sort of workaround.

This is where I bufferize the image ( image is base64) and store it in the database

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

Please tell me any further information is needed.

Answer 1

The Base64 part of the string doesn't start until after the , ; the data: part is a scheme, the image/png part is a content type, and the base64, part is an indicator that what follows it is Base64 encoded text. So you're asking to convert non-Base64 data when you try to use that entire string as Base64.

You have to remove that prefix first, because it's not part of the Base64 data. It's just part of the data: URI.