bgrins / TinyColor

Fast, small color manipulation and conversion for JavaScript
https://bgrins.github.io/TinyColor/
MIT License
5.05k stars 438 forks source link

Details lost when lightening or brightening an image #227

Open Sempervivum opened 3 years ago

Sempervivum commented 3 years ago

When I used the function lighten() or brighten() I encountered the issue that details get lost in bright regions of an image. These areas simply grow white. I coded another algorithms for brightening and it works much better: No details lost in bright regions.

    function brighten2(color, amount) {
        function helper(val, amount) {
            const delta = 255 - val,
                newVal = val + delta * amount / 100;
            return newVal;
        }
        amount = (amount === 0) ? 0 : (amount || 10);
        var rgb = tinycolor(color).toRgb();
        rgb.r = helper(rgb.r, amount);
        rgb.g = helper(rgb.g, amount);
        rgb.b = helper(rgb.b, amount);
        return tinycolor(rgb);
    }