如何使用CSS滤镜在html视频标签上应用清晰度滤镜

问题描述

我在页面上有一个html <video>标签。如何使用CSS滤镜应用清晰度滤镜？我知道如何使用CSS滤镜，但是CSS滤镜没有锐度滤镜可用。我也检查了这个问题：How to sharpen an image in CSS?，但是该示例是为div写的，因此很难应用于<video>标签。

感谢任何建议和代码示例。

解决方法

CSS 中没有内置的锐度过滤器。但是您可以使用 SVG 过滤器创建一个不清晰的蒙版并在 CSS 中引用它。但是，这些可能会很慢，我不确定它们是否足够快以在视频上运行。

div {
filter: url(#unsharpy);
}

#sample-image {
  margin-left: 50px;
  width: 600px;
  height: 400px;
}

<div>
<img id="sample-image"
    src="https://images.westend61.de/0000859335pw/close-up-of-full-shopping-cart-in-grocery-store-CAIF15555.jpg">
</div>

<svg>
    <defs>
        <filter id="unsharpy">
            <feGaussianBlur  result="blurOut" in="SourceGraphic" stdDeviation="5"/>
            <feComposite operator="arithmetic" k1="0" k2="1.3" k3="-0.3" k4="0"
            in="SourceGraphic" in2="blurOut" />
        </filter>
    </defs>
</svg>

锐度半径由模糊的大小（stdDeviation）和原始和模糊之间的混合（k2 & k3）控制。在非锐化蒙版中，模糊是从（增强的）原始图像中减去的 - 因此 k2（原始乘数）和 k3（模糊乘数）应加起来为 1。

这是一个交互式工具 - 它还允许您从正面模糊中做出贡献 - 可以创建柔焦效果。 https://codepen.io/mullany/pen/oJAjv

您还可以使用卷积矩阵进行更基本的锐化过滤。

div {
filter: url(#sharpy);
}

#sample-image {
  margin-left: 50px;
  width: 600px;
  height: 400px;
}

<div>
<img id="sample-image"
    src="https://images.westend61.de/0000859335pw/close-up-of-full-shopping-cart-in-grocery-store-CAIF15555.jpg">
</div>

<svg>
    <defs>
        <filter id="sharpy">
            <feConvolveMatrix order="3" kernelMatrix="0 -1 0 -1 5 -1 0 -1 0"/>
        </filter>
    </defs>
</svg>