How to redact/blur parts of an image using javascript (Konva)?
I'm trying to create an image editor that can mask personal identifiable information. We're using konva right now to add black Rect shapes over images, but we would love to use the blur or even pixelate feature. Im not sure I'm going about this right, can anyone help me out? Here's a sandbox
UPDATE
Ok I was able to figure it out. Instead of trying to blur a transparent Rect shape on top of an image (which will just blur the transparent Rect, not the image behind it), I needed to get a little more clever with how this worked. My solution was to keep the original image as is. Keep the black rectangular shapes working the same way, but change their fill to transparent and set a stroke color only while they were selected. These will act as a way for us to set and interact with the redacted parts. Then for each shape that was created, I created a new full-size and blurred version of the image layered on top of the original image with a parent Group that had a clip path set to the bounds of the shape.
Here's a link to the updated sandbox
It's not 100% perfect, for some reason the selection is behaving a little funny (it's working alright in our production app ¯\_(ツ)_/¯). But hopefully this is a solid enough ground for anyone else to get up and running with a redaction tool!
Would love to see if anyone has any suggestions for improvement!