如何使用 javascript (Konva) redact/blur 部分图像？
How to redact/blur parts of an image using javascript (Konva)?
我正在尝试创建一个可以屏蔽个人身份信息的图像编辑器。我们正在使用 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
更新
好的，我想通了。与其尝试模糊图像顶部的透明 Rect 形状（这只会模糊透明的 Rect，而不是它后面的图像），我需要更聪明地了解它的工作原理。我的解决方案是保持原始图像不变。保持黑色矩形以相同的方式工作，但将它们的填充更改为透明并仅在它们被选中时设置描边颜色。这些将作为我们设置编辑部分并与之交互的一种方式。然后对于创建的每个形状，我创建了一个新的全尺寸和模糊版本的图像，层叠在原始图像之上，父级 Group 的剪辑路径设置为形状的边界。
Here's a link to the updated sandbox
它不是 100% 完美，出于某种原因，选择的行为有点滑稽（它在我们的生产应用程序中工作正常 ¯\_(ツ)_/¯）。但希望这是一个足够坚实的基础，让其他任何人都能站起来，运行 一个编辑工具！
很想看看是否有人有任何改进建议！
我正在尝试创建一个可以屏蔽个人身份信息的图像编辑器。我们正在使用 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
更新
好的，我想通了。与其尝试模糊图像顶部的透明 Rect 形状（这只会模糊透明的 Rect，而不是它后面的图像），我需要更聪明地了解它的工作原理。我的解决方案是保持原始图像不变。保持黑色矩形以相同的方式工作，但将它们的填充更改为透明并仅在它们被选中时设置描边颜色。这些将作为我们设置编辑部分并与之交互的一种方式。然后对于创建的每个形状，我创建了一个新的全尺寸和模糊版本的图像，层叠在原始图像之上，父级 Group 的剪辑路径设置为形状的边界。
Here's a link to the updated sandbox
它不是 100% 完美，出于某种原因，选择的行为有点滑稽（它在我们的生产应用程序中工作正常 ¯\_(ツ)_/¯）。但希望这是一个足够坚实的基础，让其他任何人都能站起来，运行 一个编辑工具！
很想看看是否有人有任何改进建议！