如何使用css过滤器在html视频标签上应用清晰度过滤器

Question

我在页面上有一个html<video>标记。如何使用css过滤器应用清晰度过滤器？我知道如何使用css过滤器，但没有可用的清晰度过滤器是css过滤器。我还检查了这个问题：如何在CSS中锐化图像？但是该样本是为CCD_ 2s编写的，并且应用于CCD_。

任何建议和代码示例都将不胜感激。

Answer 1

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>