如何使用 javascript (Konva) 编辑/模糊图像的某些部分？

Question

我正在尝试创建一个可以屏蔽个人身份信息的图像编辑器。我们现在使用konva 在图像上添加黑色矩形形状，但我们希望使用模糊甚至像素化功能。我不确定我是否正确，有人可以帮助我吗？这是sandbox

Answer 1

更新

好的，我能够弄清楚。与其尝试在图像顶部模糊透明的 Rect 形状（这只会模糊透明的 Rect，而不是其背后的图像），我需要更聪明地了解它的工作原理。我的解决方案是保持原始图像不变。保持黑色矩形形状以相同方式工作，但将其填充更改为透明并仅在它们被选中时设置描边颜色。这些将作为我们设置编辑部分并与之交互的一种方式。然后，对于创建的每个形状，我创建了一个新的全尺寸和模糊版本的图像，叠加在原始图像之上，父图像 Group 的剪辑路径设置为形状的边界。

Here's a link to the updated sandbox

它不是 100% 完美的，出于某种原因，选择的行为有点滑稽（它在我们的生产应用程序中运行正常¯\_(ツ)_/¯）。但希望这是一个足够坚实的基础，让其他任何人都可以开始使用编辑工具！

很想看看是否有人有任何改进建议！