fix:压缩了图片

Author: mayintao

source/_posts/2021-04-20-let's-talk-about-feTurbulence.md

@@ -53,15 +53,15 @@ date: 2021-04-20 13:49:04
 
 频率越大，相同显示区域下可以显示的噪声就越密集，当baseFrequency的值为一个很小的值时（如0.01），生成的图像比较大，细节更丰富，而增大10倍之后，原来的图像被缩小10倍放到左上角，剩余的空间用来放置更多的噪声
 
-![image-20210318153234530](https://img14.360buyimg.com/imagetools/jfs/t1/147148/40/16177/4820626/605473e5Ea4883229/44140616872d2ab3.png)
+![image-20210318153234530](https://img13.360buyimg.com/imagetools/jfs/t1/167236/40/19875/4820684/607e73baEfce2212c/0a0a0031fe324405.png)
 
 以下是baseFrequency的值慢慢变大的过程
 
 ![baseFrequency](https://img14.360buyimg.com/imagetools/jfs/t1/158043/23/13950/2356811/605473d6E11394189/c53174df89b12c4d.gif)
 
 baseFrequency属性可以接受两个值，当这样入参的时候，这两个值分别会当成x轴和y轴上的基础频率，由此，我们可以生成在某一个方向拉伸的噪声。
 
-![image-20210318190421390](https://img12.360buyimg.com/imagetools/jfs/t1/160448/25/14107/1010152/605473e9E74c00c47/9eace2335b1b0b16.png)
+![image-20210318190421390](https://img13.360buyimg.com/imagetools/jfs/t1/176952/21/70/1010210/607e73aeE35817a4f/3c3414e589156049.png)
 
 ### numOctaves
 
@@ -71,7 +71,7 @@ octaves是八度的意思，玩过音乐的同学都知道，两个相邻音组
 
 我们以sin函数为例，以下是f(x) = sin(x)和f(x) = sin(10x)的函数图像：
 
-![image-20210318171028567](https://img10.360buyimg.com/imagetools/jfs/t1/169089/37/13599/750118/605473e8Edad383c1/afa44702c26a8945.png)
+![image-20210318171028567](https://img14.360buyimg.com/imagetools/jfs/t1/163943/22/19558/750176/607e73c2Ef46f02da/5a8a782bcfd67246.png)
 
 两个图象的振幅一样，后者的频率是前者的10倍，高了10个八度，现在让两个函数同时弹响，形成:
 
@@ -81,7 +81,7 @@ f(x) = sin(x) + sin(10)
 
 他的图像会是怎么样的呢？
 
-![image-20210318163824105](https://img13.360buyimg.com/imagetools/jfs/t1/160343/19/14402/140281/605473e5E3c64dbd5/a7e9e9c7960788a4.png)
+![image-20210318163824105](https://img10.360buyimg.com/imagetools/jfs/t1/180700/4/39/140339/607e73bcE55e0d25f/213aa4e4d29fbb67.png)
 
 对比前面三个图像，第三个图像感觉就像是拿第二个图像当画笔画出来的第一个图像。这，就是八度和弦的魅力，我还是原来的我，然而我花里胡哨起来了。如果再花里胡哨一点，在第三个函数上叠多一个高10个八度的函数，会不会更快乐呢。
 
@@ -101,17 +101,17 @@ feTurbulence的type属性把位于同一个子集的两个功能合并在一个
 
 以下是两种type的效果
 
-![image-20210318201755016](https://img13.360buyimg.com/imagetools/jfs/t1/168704/28/13668/1744439/605473ecEc4e3b1b9/7e20e0d688d92147.png)
+![image-20210318201755016](https://img14.360buyimg.com/imagetools/jfs/t1/166826/17/19918/1744497/607e73abE49f72364/5462dfefb58b35b6.png)
 
 ### stitchTiles
 
 stitchTiles需要使用多个图形时才能发挥效果，当我们随便设置两个使用feTurbulence滤镜的图形放在一起的时候，这两个图形的边界会出来断层的现象。两个图形就是独立的个体，自己顾自己长什么样。
 
-![image-20210318202510729](https://img11.360buyimg.com/imagetools/jfs/t1/162939/8/13648/1151527/605473f0Ed59009b3/9de464640a00b0c0.png)
+![image-20210318202510729](https://img12.360buyimg.com/imagetools/jfs/t1/182781/8/28/1151585/607e73adE8f080c6b/85a70e0c2c9713bd.png)
 
 但是有时候，我们需要让两个图形看起来像从一个连续的集合分开。这个时候就可以将滤镜的stitchTiles属性设置成stitch，那这个时候，图形的边界就会连续起来。
 
-![image-20210318202957298](https://img13.360buyimg.com/imagetools/jfs/t1/158426/34/14274/1104836/605473f4Ed00e18ba/a7cc1139c864bf92.png)
+![image-20210318202957298](https://img10.360buyimg.com/imagetools/jfs/t1/161237/14/20142/1104894/607e73bcE7585f9b9/5103ce9ce5a1e6a8.png)
 
 ### seed
 
@@ -157,11 +157,11 @@ seed是种子的意思，这是每一个随机数算法都那需要用到的一
 <feTurbulence type="fractalNoise" baseFrequency='0.04' result='noise' numOctaves="5" />
 ```
 
-得到这样的图像![image-20210319172234987](https://img11.360buyimg.com/imagetools/jfs/t1/158973/8/16150/2152241/60547400E67a255f3/a15584927afe67dd.png)
+得到这样的图像![image-20210319172234987](https://img12.360buyimg.com/imagetools/jfs/t1/179197/9/45/2152299/607e73c0Ed0ae8443/821813edf2c7cb90.png)
 
 然后，使用白光从图像上方45度角进行照射，得到以下图形
 
-![image-20210319172613135](https://img10.360buyimg.com/imagetools/jfs/t1/170970/22/13524/943427/60547402Ef11f8309/6acb0f4859d97b80.png)
+![image-20210319172613135](https://img14.360buyimg.com/imagetools/jfs/t1/180549/8/40/943485/607e73a5Ece05e38b/c6c05d06d0770ea8.png)