Resize PNG with contain making added part transparent

[Chris Rowley]

Question about an existing feature

What are you trying to achieve?

All icons on the system should be 256x256. If user uploads a non-square image when resized using fit: 'contain' the added pixels should be transparent.

When you searched for similar issues, what did you find that might be related?

I tried both searching the web with variations of "node sharp resize contain transparency" and the issues in the repo with variations of 'resize contain transparency '.

Please provide a minimal, standalone code sample, without other dependencies, that demonstrates this question

async function createIcon(data, destination) {
  const dataUri = data.match(/^data:.+\/(.+);base64,(.*)$/)
  const dataBuffer = Buffer.from(dataUri[2], 'base64')
  const icon = sharp(dataBuffer)
  icon.resize(256, 256, { fit: 'contain' })
  icon.png()
  // console.log(`${path.resolve('.')}/public/img/icons/users/${userInfo.email}.png`)
  await icon.toFile(destination)
}

Please provide sample image(s) that help explain this question

Source:

The resized version:

Sorry to bother you with this, I tried looking at the compositing features which I thought might be the solution but have had no luck.

[Lovell Fuller]

Did you see https://sharp.pixelplumbing.com/api-resize ?

Param	Type	Default	Description
[options.background]	String | Object	{r: 0, g: 0, b: 0, alpha: 1}	background colour when fit is contain, parsed by the color module, defaults to black without transparency.

[Chris Rowley]

Thanks @lovell I knew I missed something obvious and now I feel bad for having you point it out. That's what I get for an 18-hour dev bender. That fixed the problem, thank you so much!