Question

有没有一种方法可以在图像或画布上使用javascript进行图像处理？我需要应用具有长度/强度和角度的运动模糊。然后，我还需要导出图像。应该也可以在移动设备上使用。

我可以使用javascript进行实时操作吗？

Answer 1

您可以使用SVG过滤器。在<svg>中，看起来像这样：

svg{
  overflow: visible;
}

<svg>

  <filter id="verticalMotionBlur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="0 5" />
  </filter>

  <circle cx="60" cy="60" r="50" fill="green" filter="url(#verticalMotionBlur)" />
  
</svg>

，但是您也可以将其应用于页面上的任何其他DOM元素，包括图像：

img {
  filter: url(#verticalMotionBlur)
}

<svg>

  <filter id="verticalMotionBlur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="0 5" />
  </filter>
  
</svg>

<img src="https://picsum.photos/200"/>

Javascript-运动模糊图像/画布

1 个答案: