Back
PNG to WEBP in preview has black background
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.