主页 / 问题 / 1308460
Accepted
Leonid
Asked:2022-07-24 20:16:37 +0000 UTC2022-07-24 20:16:37 +0000 UTC

如何为 SVG 过滤器获得的路径添加清晰度。SVG 滤镜后不添加对比度（200%）

  • 772

我正在尝试使用一系列过滤器获取图像的轮廓SVG。在片段上，您可以切换图像并打开/关闭过滤器覆盖。

let img_sources = [
    "https://image.freepik.com/free-vector/flat-car-poster-with-photo-horizontal_52683-64510.jpg",
    "https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e",
    "https://image.freepik.com/free-vector/enjoy-summer-3d-realistic-background-with-clouds-daisies-grass-leaves-product-podium_87521-3206.jpg",
    "https://image.freepik.com/free-vector/linear-flat-wedding-monograms_52683-64319.jpg",
    "https://image.freepik.com/free-vector/gradient-grainy-gradient-shapes_23-2148975080.jpg",
    "https://image.freepik.com/free-photo/metallic-gold-green-leaves-textured-background_53876-101336.jpg",
    "https://image.freepik.com/free-psd/friends-representing-inclusion-concept-with-mock-up-t-shirts_23-2148997994.jpg",
    "https://image.freepik.com/free-psd/3d-space-rocket-with-smoke_23-2148938939.jpg"
];

let image = document.querySelector('image');
let container = document.getElementById('inputContainer');

let input_range = document.createElement('input');
let range_label = document.createElement('label');
range_label.textContent = 'ИЗОБРАЖЕНИЯ';
range_label.style.marginRight = '20px';
input_range.type = 'range';
input_range.min = 0;
input_range.max = img_sources.length - 1;
input_range.value = 0;
input_range.addEventListener('change', e => {
    draw(e.target.value);
})
container.append(input_range);
container.append(range_label);

draw();

let input_checkbox = document.createElement('input');
let checkbox_label = document.createElement('label');
input_checkbox.checked = true;
checkbox_label.textContent = 'ФИЛЬТР';
input_checkbox.type = 'checkbox';
input_checkbox.addEventListener('change', e => {
    image.setAttribute('style', e.target.checked ? "filter: url(#filter)" : "");
});
container.append(input_checkbox);
container.append(checkbox_label);

function draw(val=0){
    image.setAttribute('href', img_sources[val]);
}
<svg viewbox="0 0 400 200">
    <filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
        <feMorphology operator="dilate" radius="0.5 0.5" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" result="morphology"/>
        <feBlend mode="difference" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" in2="morphology" result="blend"/>
        <feColorMatrix type="luminanceToAlpha" x="0%" y="0%" width="100%" height="100%" in="blend" result="colormatrix3"/>
    </filter>
    <image id="filtered" href="" height="200" width="200" style="filter: url(#filter)"/>
</svg>
<div id="inputContainer" style="position: fixed; top: 4px; left: 4px"></div>

但是在接收到不同程度强度的轮廓后，我无法得到轮廓“暗度”的均匀性，也无法通过增加对比度来表现出来。我尝试将contrast(200%)过滤器添加到链中，但它根本没有任何效果。

理想情况下，增加对比度后，将生成的图像放在黑色背景上，并使用蒙版或其他工具提取清晰的黑线。如何才能做到这一点？

javascript

1 个回答

  1. Best Answer

    如果 CSS 过滤器没有可见的效果，那为什么不使用<feBlend mode="multiply">呢？

    let img_sources = [
    "https://image.freepik.com/free-vector/flat-car-poster-with-photo-horizontal_52683-64510.jpg",
    "https://image.freepik.com/free-vector/enjoy-summer-3d-realistic-background-with-clouds-daisies-grass-leaves-product-podium_87521-3206.jpg",
    "https://image.freepik.com/free-vector/linear-flat-wedding-monograms_52683-64319.jpg",
    "https://image.freepik.com/free-vector/gradient-grainy-gradient-shapes_23-2148975080.jpg",
    "https://image.freepik.com/free-vector/gradient-grainy-gradient-texture_23-2148974472.jpg",
    "https://image.freepik.com/free-vector/gradient-grainy-gradient-shape-set_23-2148971570.jpg",
    "https://image.freepik.com/free-psd/3d-space-rocket-with-smoke_23-2148938939.jpg"
];

let image = document.querySelector('image');
let container = document.getElementById('inputContainer');

let input_range = document.createElement('input');
let range_label = document.createElement('label');
range_label.textContent = 'ИЗОБРАЖЕНИЯ';
range_label.style.marginRight = '20px';
input_range.type = 'range';
input_range.min = 0;
input_range.max = img_sources.length - 1;
input_range.value = 0;
input_range.addEventListener('change', e => {
    draw(e.target.value);
})
container.append(input_range);
container.append(range_label);

draw();

let input_checkbox = document.createElement('input');
let checkbox_label = document.createElement('label');
input_checkbox.checked = true;
checkbox_label.textContent = 'ФИЛЬТР';
input_checkbox.type = 'checkbox';
input_checkbox.addEventListener('change', e => {
    image.setAttribute('style', e.target.checked ? "filter: url(#filter)" : "");
});
container.append(input_checkbox);
container.append(checkbox_label);

function draw(val=0){
    image.setAttribute('href', img_sources[val]);
}
    <svg viewbox="0 0 400 200">
    <filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
        <feMorphology operator="dilate" radius="0.5 0.5" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" result="morphology"/>
        <feBlend mode="difference" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" in2="morphology" result="blend"/>
        <feColorMatrix type="luminanceToAlpha" x="0%" y="0%" width="100%" height="100%" in="blend" result="colormatrix3"/>
        
        <feBlend mode="multiply" in="colormatrix3" result="multi1"/>
        <feBlend mode="multiply" in="multi1" result="multi2"/>
        <feBlend mode="multiply" in="multi2" result="multi3"/>
        <feBlend mode="multiply" in="multi3" result="multi4"/>
    </filter>
    <image id="filtered" href="" height="200" width="200" style="filter: url(#filter)"/>
</svg>
<div id="inputContainer" style="position: fixed; top: 4px; left: 4px"></div>

    • 2

相关问题