Элемент HTML Range для изменения фильтра изображений CSS с помощью JavaScript

Я пытаюсь использовать JavaScript для изменения фильтра CSS изображения, когда пользователь выбирает новое значение в элементе диапазона. Мой HTML, похоже, не работает. Вот мои стили изображений CSS:

<!DOCTYPE html>
<html>

<head> <style>
img {-webkit-filter: grayscale(100%); filter: grayscale(100%);}
</style> </head>

Вот мои элементы изображения и диапазона:

<body>
<img src="pineapple.jpg" id="Image" alt="Pineapple" width="300" 
height="300">

<form>
Photo Filter:
  <input type="range" id="Filter" name="points" min="0" max="10" 
onclick="ChangeFilter()">

</form>

Вот моя функция JavaScript для изменения стиля изображения CSS:

<script>
function ChangeFilter() {
Image = document.getElementById("Image").style.filter;

Filter = document.getElementById("Filter").value;
if (Filter == 1) {Image = grayscale(10%);}
if (Filter == 2) {Image = grayscale(20%);}
if (Filter == 3) {Image = grayscale(30%);}
if (Filter == 4) {Image = grayscale(40%);}
if (Filter == 5) {Image = grayscale(50%);}
if (Filter == 6) {Image = grayscale(60%);}
if (Filter == 7) {Image = grayscale(70%);}
if (Filter == 8) {Image = grayscale(80%);}
if (Filter == 9) {Image = grayscale(90%);}
if (Filter == 10) {Image = grayscale(100%);}
}
</script>

</body>
</html>

Но когда я выбираю новое значение для элемента диапазона, свойства стиля изображения просто не реагируют. Помогите, пожалуйста! Огромное спасибо :)


javascript html css range imagefilter
person Cody Taylor    schedule 11.02.2016    source источник
comment
Возможный дубликат динамически изменяющихся значений фильтра Webkit   -  person Mehran Torki    schedule 11.02.2016
comment
И возможная копия Как добавить фильтр изображения на основе диапазона входное значение?   -  person Pedram    schedule 11.02.2016

Ответы (3)


arrow_upward
1
arrow_downward

Измените событие onclick на onchange в html, а в javascript сделайте следующее:

<script>
    var image = document.getElementById("Image");
    var range = document.getElementById("Filter");
    function ChangeFilter() {
        image.style.WebkitFilter = "grayscale(" + range.value*10 + "%)");
        image.style.filter = "grayscale(" + range.value*10 + "%)");
    }
</script>
person Mehran Torki    schedule 11.02.2016
comment
Мехран - Ты волшебник! Это работает :) Спасибо. Благодарю вас. Благодарю вас. - person Cody Taylor; 11.02.2016
comment
Таким образом, вы перезаписываете все встроенные стили изображения. Не только значение фильтра. Должно быть image.style.WebkitFilter = оттенки серого( + range.value*10 + %) - person Anton; 11.02.2016
comment
Обратите внимание, что «.WebkitFilter» не будет работать в Firefox. Чтобы поддержать это, измените свойство '.filter' в вашей функции ChangeFilter(). - person fridge_light; 11.02.2016

arrow_upward
1
arrow_downward

Здесь вы можете найти работающую скрипту.

В вашем коде было несколько проблем:

1) Прежде всего, вы должны использовать событие onchange вместо события onclick. Или вы также можете использовать событие oninput.

2) Правильный способ присвоения нового значения фильтра объекту изображения — Image.style.WebkitFilter="grayscale(10%)";.

JavaScript:

function ChangeFilter() {
    Image = document.getElementById("Image");
    Filter = document.getElementById("Filter").value;

    Image.style.WebkitFilter = "grayscale(" + Filter * 10 + "%)"
}

CSS

img {-webkit-filter: grayscale(100%); filter: grayscale(100%);}

HTML

<img src="https://upload.wikimedia.org/wikipedia/commons/f/fd/Pink_flower.jpg" id="Image" alt="Pineapple" width="300" height="300">

<form>
    Photo Filter:
    <input type="range" id="Filter" name="points" min="0" max="10" onchange="ChangeFilter()" />
</form>
person Anton    schedule 11.02.2016
comment
Антон. Я использую свойства фильтра CSS, чтобы установить новое значение функции оттенков серого для элемента изображения. - person Cody Taylor; 11.02.2016
comment
Да, но неправильно, строку нужно заключать в кавычки. Пожалуйста, посмотрите мой обновленный ответ, я исправил код для вас. - person Anton; 11.02.2016

arrow_upward
0
arrow_downward

Вам нужно обернуть значение оттенков серого в виде строки.

Я упростил код для вас, используя времена вместо если.

Кроме того, вам нужно было установить -webkit-filter, и если вы начинаете со 100%, установите value на 10 для начала.

img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
<img src="http://cdn.sstatic.net/stackoverflow/img/[email protected]" id="Image" alt="Pineapple" width="300" height="300">

<form>
  Photo Filter:
  <input type="range" id="Filter" name="points" min="0" max="10" onchange="ChangeFilter()" value="10">

</form>

<script>
  function ChangeFilter() {

    var filter = document.getElementById("Filter").value;

    var greyScale = 'grayscale(' + (filter * 10) + '%)';

    document.getElementById("Image").style['-webkit-filter'] = greyScale;

    document.getElementById("Image").style.filter = greyScale;
  }
</script>

person BenG    schedule 11.02.2016