Applying CSS Contrast + Brightness Adjustment

[samdesota]

Hi, I've researching for a few hours how to apply a CSS filter operations brightness and contrast with sharp, but I haven't been able to succeed at both at the same time.

CSS brightness is simply a multiply operation I believe, so linear is ax + b, then:

image.linear(brightness)

For contrast, I ran across this: https://www.w3.org/TR/filter-effects/#contrastEquivalent, combining with a stack overflow result I was able to get this, which appears to work:

image.linear(contrast, -(128 * contrast) + 128);

However, for the life of me, I can't get these 2 operations to combine with correct results. It appears that the second linear call overwrites the first, is that correct behavior? I don't see it documented but perhaps I missed it.

So, I tried to apply both operations in one call via replacement, i.e.:

f (x) = b * x
g (x) = c * x + (-(128 * c) + 128)
f(g(x)) = (b * c * x) + (b * (-(128 * c) + 128))

To js:

image.linear(brightness * constrast, brightness * (-(128 * contrast) + 128));

But that didn't work either, perhaps my logic is off here.

Finally, I attempted to combine operation from above with the modulate brightness function to solve the brightness multiplier, but changing the brightness for some reason changes the hue of the image, or perhaps I don't understand the purpose of modulate.

So I'm left pretty lost in a field I don't know much about. Any pointers would be appreciated, and if there's any way that the sharp api could be extended to apply these 2 common option easily, that would be much appreciated, I know at least a few people have this use case.

[lovell]

I would expect your suggested approach of using the modulate operation to adjust brightness (it uses to the linear LCH colourspace internally so should be more visually accurate) and the linear operation to adjust contrast to give the best results.

Do you have an example (code and images) of the unexpected hue change? It's always possible there might be some kind of rounding bug/error.

[samdesota]

Yup, here's a self-contained example:

https://github.com/mrapogee/sharp-images-test

to run, you can

git clone https://github.com/mrapogee/sharp-images-test
cd sharp-images-test
npm install
npm run test

That will open index.html in your browser and show the difference with CSS filters. If you're not on macos, you can just open index.html in the browser yourself.

it uses this code:

const contrast = 1.5;
const brightness = 0.5;

await sharp(inputFile)
    .linear(contrast, -(128 * contrast) + 128)
    .modulate({ brightness: brightness })
    .toFile(outputFile);

Result: left is using css filters, right is using the sharp pipeline above

[lovell]

Thank you, this is a great example that led me straight to the problem, which was that the modulate operation was not ensuring the right (internal) colourspace for other colour-based operations.

Commit 833aaea fixes this and adds a unit test to prevent regression.

[lovell]

v0.23.3 now available, thank you for reporting this.

[samdesota]

🙌 Thank very much, appreciate it.