SVG feConvolveMatrix 标签

简介

实现矩阵卷积滤波器效果。简单来说,就是透过每个像素本身与周围像素的矩阵运算,算出这个图形里头每个像素的 RGBA 分别会变成如何,演算过后有可能彼此差异变大(锐利),也有可能差异变小(模糊),也有可能整个反相(浮雕或斜边),因此可以做出基本的模糊、锐利或浮雕等效果。变换通过$ n times m $核心矩阵应用于相应的源像素及其相邻像素来确定结果像素。

原理

建立大家先了解图像处理之卷积矩阵,再回来看下面的,除了变换公式有小小不同,其他都大同小异;

关键属性

属性 说明
order 定义卷积核有多少行和列(整数且大于0,默认是3)。第一个数字 orderX 表示列数,第二个数字 orderY 表示行数(如果未提供默认等于 orderX ),建议只使用小值,较高的值会比较消耗 CPU
kernelMatrix 定义卷积核,规格等于 $ orderX times orderY $,由空格或逗号分隔;
targetX,targetY 卷积核变换中心点位置。取值范围:0 <= targetX < orderX 和 0 <= targetY < orderY。 默认变换中心点 targetX = floor(orderX / 2),targetY = floor(orderY / 2
divisor 默认值是卷积核中所有值的总和,可以自定义这个值,如果总和为零,则除数设置为 1
bias 最后结果的偏移量,预设值为 0,通常的效果是改变透明度
preserveAlpha 表示 alpha 通道是否也一起进行运算,默认为 false;如果设为 true 则只会对 RGB 通道进行运算
edgeMode 表示像素重复模式,有三个值,none 表示不会重复,duplicate 表示镜像重复,wrap 表示一般重复
kernelUnitLength 这个可以理解为步长,默认矩阵移动一个像素,可,分别是 dx 和 dy

变换公式
$$
COLOR_{x,y} = frac{sum_{i=0}^{orderY-1}sum_{j=0}^{orderX-1} SOURCE_{x-targetX+j, y-targetY+i} times K_{orderX-j-1, orderY-i-1} }{divisor + bias times ALPHA(x,y)}
$$

参数说明:

  • $COLOR_{x,y}$ 表示点(x,y)像素某个颜色通道的变换后的结果值:
  • $SOURCE_{(x-targetX+j), (y-targetY+i)}$ 表示点(x-targetX+j,y-targetY+i)像素某个颜色通道值;
  • $K_{(orderX-j-1), (orderY-i-1)}$ 表示卷积核在(orderX-j-1,orderY-i-1)位置的值;
  • ALPHA(x,y) 表示点 (x,y) 像素 alpha 通道的值:
  • 其他参数上面和上面属性描述一致;

实例
输入图像为下面一张 $5 times 5$ 大小
输入图像

则其颜色值图如下:
颜色值图

只取红色通道值来举例如下:
$$
\left[begin{array}{ccc}
0 & 0 & 0 & 0 & 0 \\
0 & 0 & 0 & 0 & 0 \\
255 & 255 & 255 & 255 & 255 \\
0 & 0 & 0 & 0 & 0 \\
0 & 0 & 0 & 0 & 0
\end{array}\right]
$$

然后定义一个 $3 times 3 $ 的卷积核,如下所示:

$$
\left[\begin{array}{ccc}
1 & 2 & 3 \\
4 & 5 & 6 \\
7 & 8 & 9 \\
\end{array}\right]
$$

我们取第三行第三列像素SOURCE(2,2)的颜色值作为中心点做变换(颜色值:255);
所有参数都是默认值,则得到:

SOURCE(x,y)=SOURCE(2,2)
orderX=orderY=3
targetX=floor(orderX/2)=floor(3/2) = 1
targetY=floor(orderY/2)= floor(3/2) = 1
divisor=(9+8+7+6+5+4+3+2+1)=45
bias=0

代入公式得到
$$
COLOR_{2,2} = frac{sum_{i=0}^{2}sum_{j=0}^{2} SOURCE_{1+j, 1+i} times K_{2-j, 2-i}}{45}= \
frac{9 times 0 + 8 times 0 + 7 times 0 + 6 times 255 + 5 times 255 + 4 times 255 +
3 times 0 + 2 times 0 + 1 times 0}{45} = 85
$$

实例:

卷积矩阵可以做出锐利,模糊,浮雕或斜边等效果:

<svg width="850" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <symbol id="sym01">
             <image width="150" height="180" xlink:href="https://s.tinyx.cc/images/posts/svg/filter/convolve-matrix/timg.jpg" />
        </symbol>
        <filter id="blur">
            <feConvolveMatrix  kernelMatrix="
                                 3  0  3
                                 0  0  0
                                 3  0  3"/>
        </filter>
        <filter id="sharpen">
            <feConvolveMatrix kernelMatrix="0 -1  0
                                            -1 5 -1
                                             0 -1 0"/>
        </filter>
        <filter id="emboss">
            <feConvolveMatrix  kernelMatrix="
                                  -2 -1  0
                                  -1  1  1
                                  0  1  2"/>
        </filter>
</defs>
    <use xlink:href="#sym01" x="10" y="10"/>
    <use xlink:href="#sym01" x="170" y="10" style="filter:url(#blur)"/>
    <use xlink:href="#sym01" x="330" y="10" style="filter:url(#sharpen)"/>
    <use xlink:href="#sym01" x="500" y="10" style="filter:url(#emboss)"/>
    <g fill="green" font-size="8pt" font-weight="bold">
        <text x="60" y="210">原图</text>
        <text x="230" y="210">模糊</text>
        <text x="390" y="210">锐化</text>
        <text x="560" y="210">浮雕</text>
    </g>
</svg>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注