https://en.wikipedia.org/wiki/File:Faux-bokeh-comparison.jpg
很容易区分我正在使用的过滤器。我不想使用高斯模糊。
答案 0 :(得分:0)
是的,可以创建散景滤镜,但通常您必须使用剪辑路径来选择前景。下面是一个三层散景滤镜的示例,其中包含粗略的剪辑路径,以向您展示如何操作。正如您所看到的,过滤器非常复杂(并且性能密集),您可能最好在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>