Skip to content

Applying CSS Contrast + Brightness Adjustment #1958

@samdesota

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions