Проблемы с несколькими функциями фильтрации

Я написал код для фильтров изображения, и у меня возникли проблемы с моим текущим кодом. Когда я меняю один из ползунков, изображение становится просто белым. Я не совсем уверен, в чем проблема этих кодов, я понятия не имею, как это исправить. Я попытался изменить переменные вокруг, но не искал удачи.

Он должен изменить изображение так же, как фильтр изображения.

var img = document.getElementById("myImg");

var slider1 = document.getElementById("slider1");
var slider2 = document.getElementById("slider2");
var slider3 = document.getElementById("slider3");
var slider4 = document.getElementById("slider4");
var slider5 = document.getElementById("slider5");
var slider6 = document.getElementById("slider6");
var slider7 = document.getElementById("slider7");

var sepia = slider1.value;
var blur = slider2.value;
var invert = slider3.value;
var contrast = slider4.value;
var opacity = slider5.value;
var grayscale = slider6.value;
var brightness = slider7.value;

slider1.addEventListener("input", function(){
    sepia = this.value;
    img.style["-webkit-filter"] = "sepia(" + this.value + "%) blur("+blur+"px) invert("+invert+"%) contrast("+contrast+"%) opacity("+opacity+"%) grayscale("+grayscale+"%) brightness("+brightness+")";
});

slider2.addEventListener("input", function(){
    blur = this.value;
    img.style["-webkit-filter"] = "blur(" + this.value + "px) sepia("+sepia+"%) invert("+invert+"%) contrast("+contrast+"%) opacity("+opacity+"%) grayscale("+grayscale+"%) brightness("+brightness+")";
});

slider3.addEventListener("input", function(){
    invert = this.value;
    img.style["-webkit-filter"] = "invert(" + this.value + "%) sepia("+sepia+"%) blur("+blur+"px) contrast("+contrast+"%) opacity("+opacity+"%) grayscale("+grayscale+"%) brightness("+brightness+")";
});

slider4.addEventListener("input", function(){
    contrast = this.value;
    img.style["-webkit-filter"] = "contrast(" + this.value + "%) sepia("+sepia+"%) blur("+blur+"px) invert("+invert+"%) opacity("+opacity+"%) grayscale("+grayscale+"%) brightness("+brightness+")";
});

slider5.addEventListener("input", function(){
    opacity = this.value;
    img.style["-webkit-filter"] = "opacity(" + this.value + "%) sepia("+sepia+"%) blur("+blur+"px) invert("+invert+"%) contrast("+contrast+"%) grayscale("+grayscale+"%) brightness("+brightness+")";
});

slider6.addEventListener("input", function(){
    grayscale = this.value;
    img.style["-webkit-filter"] = "grayscale(" + this.value + "%) sepia("+sepia+"%) blur("+huerotate+"px) invert("+invert+"%) contrast("+contrast+"%) opacity("+opacity+"%) brightness("+brightness+")";
});

slider7.addEventListener("input", function(){
    brightness = this.value;
    img.style["-webkit-filter"] = "grayscale(" + this.value + "%) sepia("+sepia+"%) blur("+blur+"px) invert("+invert+"%) contrast("+contrast+"%) opacity("+opacity+"%) grayscale("+grayscale+"%)";
});

<img id = "myImg" src = "https://pbs.twimg.com/profile_images/591093476/bird.jpg">
<input type = "range" id = "slider1" value = "50">
<input type = "range" id = "slider2" value = "4">
<input type = "range" id = "slider3" value = "50">
<input type = "range" id = "slider4" value = "50">
<input type = "range" id = "slider5" value = "50">
<input type = "range" id = "slider6" value = "50">
<input type = "range" id = "slider7" value = "50">

javascript html css

07.04.2019 08:16

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваша яркость не имеет единицы (%)

img.style["-webkit-filter"]  = "sepia(" + this.value + "%) blur("+blur+"px) invert("+invert+"%) contrast("+contrast+"%) opacity("+opacity+"%) grayscale("+grayscale+"%) brightness("+brightness+"%)";

Ниже приводится переписывание оригинального поста:

// get reference
var img = document.getElementById('myImg');
var sliders = {
    sepia: document.getElementById('slider1'),
    blur: document.getElementById('slider2'),
    invert: document.getElementById('slider3'),
    contrast: document.getElementById('slider4'),
    opacity: document.getElementById('slider5'),
    grayscale: document.getElementById('slider6'),
    brightness: document.getElementById('slider7')
};
// set to correct values
sliders.sepia.value = 0;
sliders.blur.value = 0;
sliders.invert.value = 0;
sliders.contrast.value = 100;
sliders.opacity.value = 100;
sliders.grayscale.value = 0;
sliders.brightness.value = 100;

function render() {
    img.style['-webkit-filter'] =
        'sepia(' + sliders.sepia.value + '%)' +
        'blur(' + sliders.blur.value + 'px)' +
        'invert(' + sliders.invert.value + '%)' +
        'contrast(' + sliders.contrast.value + '%)' +
        'opacity(' + sliders.opacity.value + '%)' +
        'grayscale(' + sliders.grayscale.value + '%)' +
        'brightness(' + sliders.brightness.value + '%)';
}

// bind listeners
for (var filterName in sliders) {
    sliders[filterName].addEventListener('input', render);
}

<img id = "myImg" src = "https://pbs.twimg.com/profile_images/591093476/bird.jpg">
<input type = "range" id = "slider1" value = "50">
<input type = "range" id = "slider2" value = "4">
<input type = "range" id = "slider3" value = "50">
<input type = "range" id = "slider4" value = "50">
<input type = "range" id = "slider5" value = "50">
<input type = "range" id = "slider6" value = "50">
<input type = "range" id = "slider7" value = "50">

07.04.2019 08:20

Другие вопросы по теме

HTML: попытка встроить видео с YouTube

HTML-форма в Outlook с функцией публикации

Как изменить состояние компонента, когда я нажимаю кнопку, которая находится на другом компоненте

Есть ли способ показать кнопку на основе свободного места в коробке, сделанной

Если Markdown — это надмножество HTML, то почему он не может делать все, что может HTML?

Angular 2+ кнопка отключения определенной строки

Получение пустых массивов при поиске элементов по классу с помощью Jquery

Нажатие на панель навигации работает. Но HTML href указывает на что-то другое

Как создать пагинатор django с помощью ajax?

Как я могу сохранить IP-адрес пользователя и тип браузера, который они используют, в текстовый файл с использованием PHP каждый раз, когда они вводят неверные учетные данные для входа?

Проблемы с несколькими функциями фильтрации

Ответы 1

Другие вопросы по теме

Похожие вопросы