css - 我可以使用 SVG 滤镜或 CSS 滤镜制作 Bokeh 模糊吗？

Question

https://en.wikipedia.org/wiki/File:Faux-bokeh-comparison.jpg

很容易区分我正在使用的过滤器。我不想使用高斯模糊。

Answer 1

是的，可以创建 Bokeh 滤镜，但通常您必须使用剪辑路径来选择前景。这是一个带有粗略剪辑路径的三层 Bokeh 滤镜的示例，只是为了向您展示如何操作。正如您所看到的，过滤器非常复杂(并且性能密集)，您可能最好在 PhotoShop 中而不是在运行时执行它。

<svg width="1800px" height="800px">
  <defs>
<clipPath id="foreground">
  <polyline points="0,240 20,260 40,300 40,360 20,380 30,420 60,450 175,500 200,600, 0,600, 0,220" fill="black"/>
  </clipPath>

<filter id="bokeh" x="0%" y="0%" width="90%" height="100%" color-interpolation-filters="sRGB">
  <feGaussianBlur stdDeviation="2" result="blurSource"/>
  <feColorMatrix type="luminanceToAlpha"/>
  <feComponentTransfer result="brightness-mask" >
    <feFuncA type="discrete" tableValues="0 0 0 1 1"/>
    </feComponentTransfer>

  
 <!--bokeh Layer 1 -->
 <feTurbulence type="fractalNoise" seed="1" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
  <feComponentTransfer>
    <feFuncA type="discrete" tableValues="0 0 0 1"/>
 </feComponentTransfer>
  <feComposite operator="in" in="brightness-mask"/>
  <feComposite operator="in" in="blurSource"/>

  <feMorphology operator="dilate" radius="5"/>
  <feGaussianBlur stdDeviation="8"/>
  <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0 
                                       0 0 0 9 0" /> 
  <feComponentTransfer result="bokeh1">
    <feFuncA type="linear" slope=".5" />
 </feComponentTransfer>  
  
  
  
  <!--bokeh Layer 2 -->
 <feTurbulence type="fractalNoise" seed="49" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
  <feComponentTransfer>
    <feFuncA type="discrete" tableValues="0 0 0 1"/>
 </feComponentTransfer>
  <feComposite operator="in" in="brightness-mask"/>
  <feComposite operator="in" in="blurSource"/>

  <feMorphology operator="dilate" radius="10"/>
  <feGaussianBlur stdDeviation="12"/>
  <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0 
                                       0 0 0 15 0" /> 
  <feComponentTransfer result="bokeh2">
    <feFuncA type="linear" slope=".3" />
 </feComponentTransfer>  
  
<!--bokeh Layer 3 -->
  
<feTurbulence type="fractalNoise" seed="44" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
  <feComponentTransfer>
    <feFuncA type="discrete" tableValues="0 0 0 1"/>
 </feComponentTransfer>
  <feComposite operator="in" in="brightness-mask"/>
  <feComposite operator="in" in="blurSource"/>

  <feMorphology operator="dilate" radius="10"/>
  <feGaussianBlur stdDeviation="18"/>
  <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0 
                                       0 0 0 15 0" /> 
  <feComponentTransfer result="bokeh3">
    <feFuncA type="linear" slope=".2" />
 </feComponentTransfer>  
  
<!--Merge -->
 <feBlend mode="multiply" in="bokeh3" in2="bokeh2"/>
 <feBlend mode="lighten" in2="bokeh1"/>
  
  <feMorphology operator="erode" radius="0" result="bokeh"/>   
  <feGaussianBlur stdDeviation="9" in="SourceGraphic"/>
  <feComposite operator="over" in="bokeh"/> 

</filter>
  </defs>

    <image filter="url(#bokeh)"  width="400px" height="600px" preserveAspectRatio="xMinYMin slice" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/ac/Faux-bokeh-comparison.jpg"/>
     <image clip-path="url(#foreground)"  width="400px" height="600px" preserveAspectRatio="xMinYMin slice" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/ac/Faux-bokeh-comparison.jpg"/>
       <image x="400"  width="360px" height="600px" preserveAspectRatio="xMinYMin slice" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/ac/Faux-bokeh-comparison.jpg"/>
  
  <text x="100" y="630">Bokeh Filter</text>
<<text x="550" y="630">Original</text>
  
</svg>