如何使用 css 过滤器在 html 视频标签上应用锐度过滤器答案

【问题标题】：How to apply sharpness filter on html video tag using css filters如何使用 css 过滤器在 html 视频标签上应用锐度过滤器
【发布时间】：2020-10-07 13:49:49
【问题描述】：

我在页面上有一个 html <video> 标签。如何使用 CSS 滤镜应用锐度滤镜？我知道如何使用 css 过滤器，但没有可用的锐度过滤器是 css 过滤器。我也检查了这个问题：How to sharpen an image in CSS?，但示例是为divs 编写的，因此应用于<video> 标记非常复杂。

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

【问题讨论】：

标签： css image image-processing css-filters

【解决方案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>

【讨论】：