Как сделать по нажатию кнопки применение фильтра

Question

Мне нужно сделать функцию,что-бы при нажатии на кнопку менялся фильтр у изображения

<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>API</title>
</head>
<body>
<div>
    <label for="znac">Введи значение</label>
    <input id="znac">
    <button onclick="Draw()">Изменить</button>

    <svg height="300" width="180">
        <path id="drawing" d="M10 80 Q 100 150 180 80" stroke="black" fill="transparent"/>
    </svg>
</div>

<div>
    <label for="text">Что написать?</label>
    <input id="text">
    <button onclick="replace()">Написать</button>

    <canvas id="symbols" width="800" height="200"> </canvas>
</div>
<div>
    <p>Было</p>
    <svg width="538" height="718">
        <image  xlink:href="11jpeg" width="538" height="718">
        </image>
    </svg>
    <button onclick="blur()">Блюр</button>
    <button onclick="black()">Черно-белый</button>
    <button onclick="negativ()">Негатив</button>
    <button onclick="red()">Красный</button>
    <button onclick="cb()">Понижение контрастности</button>
    <p>Стало</p>
    <svg width="538" height="718">
        <filter id="blur">
            <feGaussianBlur stdDeviation="2"></feGaussianBlur>
            </filter>
        <filter id="black">
            <feColorMatrix type="saturate" values="0"></feColorMatrix>
        </filter>
        <filter id="negativ">
            <fecomponenttransfer>
                <fefuncr type="table" tablevalues="1 0" />
                <fefuncg type="table" tablevalues="1 0" />
                <fefuncb type="table" tablevalues="1 0" />
            </fecomponenttransfer>
        </filter>
        <filter id="red">
            <fecomponenttransfer>
                <feFuncR type="linear" slope="5" intercept="-0.5" />
                <feFuncG type="linear" slope="0.2" />
                <feFuncB type="linear" slope="0.2" />
                <feFuncA type="identity" />
            </fecomponenttransfer>
        </filter>
        <filter id="cb">
            <fecolormatrix type="saturate" values="0.5"></fecolormatrix>
        </filter>
        <image class="image" id="image" xlink:href="11.jpeg" width="538" height="718"
              filter = "none">
        </image>
    </svg>
</div>
<script>
    function Draw() {
        let ttt = document.getElementById("drawing");
        let x = document.getElementById('znac').value;
        ttt.setAttribute('d', 'M10 80 Q 100 ' +x+ ' 180 80' );
    }

    function replace() {

        const canvas = document.getElementById("symbols");
        const ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        let data = document.getElementById('text').value;
        ctx.font = "40px Verdana";
        var gradient=ctx.createLinearGradient(0,0,canvas.width,0);
        gradient.addColorStop("0","magenta");
        gradient.addColorStop("0.5","blue");
        gradient.addColorStop("1.0","red");
        ctx.strokeStyle=gradient;
        ctx.strokeText(data ,50, 100);
    }
    function blur() {

        let b = document.getElementById("image");
        let i = "url(#cb)";
        b.setAttribute('filter' ,i );
        
    }
</script>
</body>
</html>

Answer 1

Вешаешь обработчик события .addEventListener("click", function(){}) на кнопку которую надо отслеживать, по нажатию для элемента (которому не мешало бы присвоить id ) меняешь значение атрибута filter="url(#cb)" на нужное... Если бы зачу оформил нормально, и её можно б было запустить хотя бы в примере, то ответ был бы более наглядный. А так... это

Answer 2

Я сделал так:

document.getElementById('cb').onclick = function() {
    var b = document.getElementById("image");
    b.setAttribute('filter' , 'url(#black)' );
}

БЛОГ НА HUSL

Как сделать по нажатию кнопки применение фильтра

Ответы (2 шт):