How to apply Photoshop-style color curves filters to an HTML tag?-CodePudding

I'm trying to replicate the following Photoshop color curves filter in an HTML video tag.

The closest answer I've found so far is how to add Photoshop-like color levels with CSS and SVG Filters but it's not quite what I need.

Any approach using CSS, SVG Filters, or even a third-party library is welcome!

CodePudding user response：

feComponentTransfer / table is how you implement color curves. This filter will - roughly - produce that curve combo and should give you a place to start. The first feComponentTransfer implements the color curves (I eyeballed the values - you'll want to go back and do it more carefully). The second implements the white-point adjustment.

I think the order is correct, but I'm not a Photoshop expert, so you may have to put the white point adjustment first.

<filter id="color-curve" color-interpolation-filters="sRGB">
<feComponentTransfer>
  <feFuncR type="table" tableValues="0.0 0.22 0.4 0.6 0.4 0.8 0.86 0.92 0.96 0.98 1.0"/>
  <feFuncG type="table" tableValues="0.0 0.0 0.05 0.1 0.22 0.4 0.6 0.83 0.92 0.97 1.0"/>
  <feFuncB type="table" tableValues="0.1 0.8"/>
</feComponentTransfer>

<feComponentTransfer>
  <feFuncR type="table" tableValues="0.1 1"/>
  <feFuncG type="table" tableValues="0.1 1"/>
  <feFuncB type="table" tableValues="0.1 1"/>
</feComponentTransfer>
</filter>

I wrote the docs for webplatform on feComponentTransfer linked here: http://www.webplatform.org/docs/svg/elements/feComponentTransfer/

There is no more comprehensive guide to how this filter primitive works so just read that carefully.