Sharp: Change opacity/alpha

Created on 30 Aug 2016 · 10Comments · Source: lovell/sharp

It would be great if the opacity/alpha of a sharp image instance could be directly changed,
e.g. making it semitransparent, putting out as raw to buffer and overlaying another image with it.
(Also useful for visually debugging overlay compositions).

question

Source

strarsis

Most helpful comment

This is a whole lot of code for simply adding an alpha channel to the images.

let img, meta;
try {
    img = sharp(file);
    meta = await img.metadata();
    img = await img.joinChannel(Buffer.alloc(meta.width * meta.height, 255), {
        raw: {
            width: meta.width,
            height: meta.height,
            channels: 1
        }
    });
} catch (err) {
    error(err);
    return;
}
file = path.parse(file);
await img.png().toFile(projDir + '/' + file.name + '.png');

It would be more user friendly to just have a dedicated method since joinChannel is so cumbersome and overlaying four channels on the image seems like a very high performance cost for such a simple task.

let img = await sharp(file).addAlpha();
await img.png().toFile(...);

quinton-ashley on 7 Mar 2018

👍3

All 10 comments

Hello, a possible workaround for this might be to overlay with a raw pixel buffer containing tiled, semi-transparent pixel value, something like the following (untested):

sharp(input)
  .overlayWith(
    new Buffer([0, 0, 0, 128]),
    { tile: true, raw: { width: 1, height: 1, channels: 4 } }
  )...

lovell on 2 Sep 2016

Thanks. Though an API method could be more intuitive.

strarsis on 2 Sep 2016

sharp(input)
  .overlayWith(
    new Buffer([0, 0, 0, 128]),
    { tile: true, raw: { width: 1, height: 1, channels: 4 } }
  )

The code works insofar that it adds an alpha channel -
but the output image is now different compared to the input image, much darker.

When I remove tile: true there will be still one pixel changed -
but the output image should be identical to input image plus an alpha channel.

strarsis on 14 Sep 2016

Hello, [0, 0, 0, 128] was an example of adding a semi-transparent alpha channel. If you want it to be fully-transparent, you can use [0, 0, 0, 0].

If you know the image dimensions then an alternative method of adding a fully-transparent alpha channel is by passing a zero-filled Buffer to joinChannel, for example (untested):

sharp(input).joinChannel(Buffer.alloc(width * height), {
  raw: {
    width: width,
    height: height,
    channels: 1
  }
})...

lovell on 14 Sep 2016

👍3

This is a whole lot of code for simply adding an alpha channel to the images.

let img, meta;
try {
    img = sharp(file);
    meta = await img.metadata();
    img = await img.joinChannel(Buffer.alloc(meta.width * meta.height, 255), {
        raw: {
            width: meta.width,
            height: meta.height,
            channels: 1
        }
    });
} catch (err) {
    error(err);
    return;
}
file = path.parse(file);
await img.png().toFile(projDir + '/' + file.name + '.png');

let img = await sharp(file).addAlpha();
await img.png().toFile(...);

quinton-ashley on 7 Mar 2018

👍3

Rather than dealing with raw data and Buffer allocation, something like the following might be a bit simpler (create was added in v0.17.3).

.joinChannel({ create: { background: 'black', channels: 1, width, height } })

EDIT: this won't work as the create feature only supports 3 and 4 channels.

lovell on 8 Mar 2018

Why even make it that verbose though? If someone is adding an alpha channel to an image it must be for the entire image. You can't selectively make one part of the image RGB format and another RGBA format.

quinton-ashley on 8 Mar 2018

@quinton-ashley I've created #1153 for this suggestion; PRs always welcome.

lovell on 9 Mar 2018

👍1

Hello!

I was also looking for a simple method to change the image transparency, but couldn't find one.

Why is this issue closed and why is it classified as a question? I think it's a perfectly valid feature request. @lovell

I would really like to see this in the library. Thank you for your hard work.