Replace Color with transparency

[yasso1am]

What are you trying to achieve?

I have a known rgb value that surrounds the screenshot I am taking, and would like to replace it with a white, fully transparent background. I have not seen examples of how to do this.

Have you searched for similar questions?

Yes. It seems most people want to take a transparent background and provide it with a color. I am looking to take a known color and change it, as well as make it transparent.

Are you able to provide a standalone code sample that demonstrates this question?

const trimWhiteSpaceAndPad = (path) => {
    sharp(path)
    .trim()
    .resize(175, 180, {
        fit: 'contain',
        background: {
            r: 225,
            g: 227,
            b: 237,
        }
    })
    .extend({
        left: 5,
        right: 5,
        top: 0,
        bottom: 0,
        background: {
            r: 225,
            g: 227,
            b: 237,
            alpha: 0
        }
    })
    .toFile(`trimmed_${path}`, (err) => {
            err && console.log('Error trimming file:' + err)
        })
}

Are you able to provide a sample image that helps explain the question?

I would like to be able to take all of the off-white (225,227,237) area that edges up against the model of these teeth and turn it white and transparent. I acquired this photo with the code above.

Here is my input file:

Here is my output file:

I would like if all the outside area was transparent. It would be great if I could call something like

.replace({ input: {// color I want to replace here}, output: {// color I want it to be} })

[lovell]

Hello, although libvips provides some "flood fill" features, they are not yet exposed in sharp. I'll tag this as a future possible enhancement.

For now your best bet is to use raw pixel output then loop over and selectively replace values.

[yasso1am]

Hello, although libvips provides some "flood fill" features, they are not yet exposed in sharp. I'll tag this as a future possible enhancement.

For now your best bet is to use raw pixel output then loop over and selectively replace values.

lovell <- thank you so much for your quick response! I wasn't sure how to implement your suggestion, but it lead me to a new line of questioning and I ended up using the following package: https://github.com/turakvlad/replace-color

Perhaps it can be of use to you if building out this enhancement. I really appreciate all your awesome work and the use of your package!

[daton89]

I'm also looking forward to add the floodfill feature to this labrary, I was about to move from ImageMagick to Sharp, but without this feature I can't. I would also help to have this feature!

[hengkx]

Any progress?

[BH4HPA]

For now your best bet is to use raw pixel output then loop over and selectively replace values.

thanks for providing an available idea here's a possible solution for replacing the white color with transparency:

const HEX = '0123456789ABCDEF';
const toHex = (value: number) => {
  let rtn = '';
  while (value !== 0)
    rtn = HEX[value % 16] + rtn, value = Math.floor(value / 16);
  return rtn;
}
const { data, info } = await origImg
  .raw()
  .toBuffer({ resolveWithObject: true });
for (let i = 0; i < data.length; i += 4)
  if (`#${toHex(data[i])}${toHex(data[i + 1])}${toHex(data[i + 2])}` === '#FFFFFF')
    data[i + 3] = 0;
const alphaImg = sharp(data, {
  raw: {
    width: info.width,
    height: info.height,
    channels: 4
  }
}).toFormat('png').toBuffer();

[lovell]

v0.32.1 now available with unflatten() operation - see https://sharp.pixelplumbing.com/api-operation#unflatten

PRs with further enhancements to this experimental feature are welcome.