Try SVG-based duotone filter

[ajlende]

@jasmussen This is what I was able to get done today. It's still very broken, but I found a way to get the server-side rendering mostly working.

The ids are a little wonky, the filter is applied to the placeholder, it bleeds outside of the image in Chrome, it doesn't render at all in Firefox, and there isn't a way to disable them at the moment. But there are duotone filters and you can change the color of them. 🙂

There's a lot of other effects that can be done and this technique could be applied to any block. Going the SVG filter route also opens up the possibility of tweaking things like gamma and contrast on the duotone and adding more colors to the gradient.

Related to #12 and #13

[jasmussen]

OMG this is so good.

I'm going to see what tweaks I can push!

[jasmussen]

This is really cool. I'm impressed you managed to build this as a plugin.

One challenge, though — the filter should ideally be attached to only the element that is to receive the filter. In the case of the Image block, it's the img. That will also avoid the resize handles and caption being filtered.

In the case of the Cover block it's a bit more tricky as it's the block itself that holds the background image, i.e. the filter will affect child blocks also. We could potentially start with the Image block and then refactor the cover block to be more amenable to this type of filtering.

I managed to fix that extra padding around the image, that was curious indeed and to be quite honest I'm not sure why my fix works.

I created https://codepen.io/joen/pen/RwWxZpN?editors=1100 to debug this — it appears the feColorMatrix was the cause of it. When I use the identical color matrix as I created for the previous test codepen, everything is fine, even the colors. Look:

Again, I don't know why this works, but it appears to.

[jasmussen]

I managed to get it working in Firefox.

Turns out, for an element to be able to be filtered by an SVG filter, that SVG must not be display: none;. So I applied an array of other tricks that should ensure the SVG is invisible to the user, but technically visible to the filter.

[ajlende]

I think I know why your fix worked. I thought it would be okay to set the alpha to a constant 1 by making the last row 00001 changing it back to 00010 uses the alpha from the image. When they're calculating the filter, they must be doing it on a canvas larger than the image (maybe a power of two size in pixels for efficiency when sending to the GPU). The padding shows the edge of that canvas.

The special values I had in the rows above are weighted values for producing a more natural looking grayscale instead of just taking the average of the values. They're the values for calculating luminance when converting to a YUV color space https://www.mathworks.com/help/matlab/ref/rgb2gray.html#algorithms

[jasmussen]

Too awesome, feel free to restore your weighted values! I did not mean to overwrite your work, so absolutely go with the better values if you hvae the larger matte worked out.

[ajlende]

The block filter approach can only apply duotone to an entire block at a time, so I'll be opening another PR with a standalone block with only the image part filtered