Javascript 如何在画布中实现反向径向倾斜移动效果

我正在创建的内容

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

我想添加的功能

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

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

我尝试过的

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

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

---

也许我可以稍后完成此演示

如你所见，我把你的图像作为背景。 然后，我将相同的图像加载到一个图像元素中，该元素用于创建圆的图案。 现在，当圆移动时，我移动图案偏移，使图像看起来与背景相同，但您看到的是图案

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

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

稍后我将完成演示。 希望它能给你帮助

编辑：我这里有严重的cors问题。 我不知道如何制作非本地图像的片段

下面是使用fabricjs制作的工作演示：

---

你说的最快？只需在所需区域上绘制一条填充中等透明度白色的圆形路径。你可以用像素处理来模糊，但它太慢了。@markE:我不记得阴影模糊是否也适用于drawImage。。。通过适当的剪裁（+偏移技巧），这就是答案。@markE:我想实现的主要目标是模糊，所以我认为仅仅是透明度是不合适的。这很公平。你退房了吗？看看我的答案，看一个简单的把戏。模糊图像并将其用作与圆反向移动的图案。请看截图，我看到你使用的是旧版本的fabricjs（bouding box外的笔划），更新效果更好。哇，这太棒了，谢谢你的帮助和很棒的演示！这节省了我很多时间，你能用“需要一些技巧来补偿缩放效果”为我指出正确的方向吗？我在演示中添加了缩放效果“提示”。我改成了椭圆，因为模糊人脸更有用。你知道吗？现在缺少旋转。非常感谢：）为了有效地缩放，您做了哪些更改？我想我要禁用旋转，现在不需要它；只有当您的服务器允许CORS时才起作用，所以您试图接触的主机可能没有根据手势事件计算新的宽度和高度？