css实现锐化效果“这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战” 锐化效果的实现我的需求是实现视频透明

“这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战”

锐化效果的实现

我的需求是实现视频透明度、亮度、对比度，饱和度、模糊、锐化等效果的预览，然后传递对应的参数给后端。发现除了锐化，其他功能css filter都要对应的效果。

关于锐化google了很久，最终找到了实现方案：

即,使用svg写一个锐化的滤镜，作为一个遮罩层，然后应用到对应的元素上，代码如下：

<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>

div {
filter: url(#unsharpy);
}

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

锐化程度的调整通过修改stdDeviation来改变，当前是5，越大，锐化程度越高

其中，svg的部分也可以使用一个矩阵来表达

<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>

div {
filter: url(#sharpy);
}

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

锐化程度，可以通过调整矩阵值实现，修改下面圈出来的值

feConvolveMatrix的原理如下：developer.mozilla.org/zh-CN/docs/…

CSS滤镜参考

滤镜	释义
filter:blur(5px)	模糊
filter:brightness(1.4)	亮度
filter:contrast(200%)	对比度
filter:drop-shadow(4px 4px 8px blue)	投影
filter:grayscale(50%)	灰度
filter:hue-rotate(90deg)	色调变化
filter:invert(75%)	反相
filter:opacity(25%)	透明度
filter:saturate(230%)	饱和度
filter:sepia(60%)	褐色

这些滤镜可以组合在使用，举个栗子

filter: contrast(175%) brightness(3%);

css实现锐化效果

锐化效果的实现

CSS滤镜参考

更多学习资源