如何在画布中实现反向径向倾斜移位效果[关闭]

Question

我在创造什么

我正在创建一个 JavaScript 图像处理应用程序（使用 Fabric.js 和 HTML5 画布）来构建/重新渲染画布并将对象放置/拖动到上面。放置对象后，它可以导出数据url并操作图像。

我要添加的功能

我正在尝试实现反向径向倾斜移位效果，以便图片中的某些点可能会“模糊”。通过 Fabric.js 或单纯的 HTML5 画布实现这一目标的最快方法是什么？

这是我想要实现的一个示例

我的尝试

• 添加圆形并尝试添加模糊/卷积效果 它然后降低不透明度=>这在我的情况下不起作用，我 只能更改不透明度属性。

• 添加图像（来自 URL）并尝试与第一个相同的操作 观点。 => 这在我的情况下不起作用，我只能添加一个 模糊/卷积滤镜，但不改变不透明度。

Answer 1

也许我可以稍后完成这个演示。

如您所见，我将您的图像作为背景。 然后我将相同的图像加载到我用来为圆圈创建图案的图像元素中。 现在，当圆圈移动时，我会移动图案偏移量，因此看起来图像与背景相同，但您正在查看图案。

现在想象一下使用 stackblur 或 fabricjs 过滤器来模糊图案图像（只需一次），你应该会得到你想要的效果。

需要一些技巧来补偿缩放效果。

我稍后会完成演示。 希望对你有所帮助。

编辑：我这里有严重的 cors 问题。 我不知道如何使用非本地图像制作 sn-p。

这里是使用 fabricjs 制作的工作演示： http://www.deltalink.it/andreab/fabric/blur.html