answerstu

Implementing css/svg contrast filter using sharp (libvips)

I'm using libvips to transform images on the backend with a css/svg preview on the frontend to save resources.I'm struggling with implementing the contrast css/svg filter function.The specification shows contrast as a linear transformation in form of:out = slope * in + interceptwhere intercept should be:intercept = - (0.5 * slope) + 0.5This way, I can use contrast(1.25) in css preview of image modifications.However, implementing this linear function in libvips through JS library sharp:sharp.linear(contrast, - (0.5 * contrast) + 0.5)Looking deep...Read more

svg filters - feDisplacementMap on generated rectangle not working

I'm trying to create an SVG filter that will "cut" an image in half horizontally, and move the lower part a few pixels to the right. This filter is to be used in CSS.For this, i am using feDisplacementMap on a rectangle that is generated with 2 feFlood merged together.This is how i generate the rectangle to be used by the displacement map. I think it is properly generated:.container { outline: 1px solid green;}h1 { filter: url(#displacementFilter);}<div class="container"> <h1>test</h1></div><svg width="0" height="0...Read more

SVG alpha filter altering pixel color

I'm using JS and <canvas> to render an isometric scene. I'm using this SVG filter so that the tiles have sharp pixel edges:<svg width="0" height="0" style="position:absolute;z-index:-1;"> <defs> <filter id="remove-alpha" x="0" y="0" width="100%" height="100%"> <feComponentTransfer> <feFuncA type="linear" slope="255"></feFuncA> </feComponentTransfer> </filter> </defs></svg>This forces any transluscent pixels to render as opaque. But it's also slightly alte...Read more