Skip to content
Start project
Back

PNG to WEBP in preview has black background

  • 1
  • Self Hosted
  • Web
  • Storage
View on Discord
Hexi
2 Jun, 2024, 11:33

when I set the output to WEBP and the original image is from an PNG. I get an black background what should of been transparent.

When I set the background color to white fore example it does set it to white. Only thing is that I cant set that to transparent either in hex for example: ffffff00 should be transparent. But it does not allow those 2 extra hex codes to allow for transparancy

TypeScript
async function getBucketImage(
  imageName,
  options = {},
  bucketId = process.env.IMAGES_BUCKET_ID
) {
  if (imageName.includes(".")) imageName = imageName.split(".")[0];
  const imageMeta = (await storage.listFiles(bucketId, [], imageName))
    ?.files[0];
  const result = await storage.getFilePreview(
    bucketId, // bucketId
    imageMeta.$id,
    options.width,
    options.height,
    options.gravity,
    options.quality,
    options.borderWidth,
    options.borderColor,
    options.borderRadius,
    options.opacity,
    options.rotation,
    options.background,
    options.output
  );
  if (imageMeta.name.split(".")[0] !== imageName) {
    return null;
  }
  return { type: imageMeta.mimeType, data: result };
}
TL;DR
Developers are having issues converting PNG images to WEBP in the preview because the background turns black instead of staying transparent. They are unable to set the background color to transparent using hex codes. Solution: Update the code snippet provided in the message to include the necessary changes to enable transparent backgrounds when converting from PNG to WEBP in the preview.
Reply

Reply to this thread by joining our Discord

Reply on Discord

Recommended threads

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more