Javascript Range Filter To Dom (загруженное пользователем изображение) - PullRequest
Новая
       6

Javascript Range Filter To Dom (загруженное пользователем изображение)

0 голосов
/ 30 июня 2018

Цель моего кода - позволить пользователям загружать свое собственное изображение и иметь возможность размыть его. Часть загрузки изображений работает, но значение диапазона - нет.

Пример: пользователь загружает изображение, и он хочет размыть его на 20%, он может переместить ползунок примерно до 20%, и это изменит размытие изображения с идентификатором «userIMG». 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: black;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}
</style>
</head>
<body>

<input type="file" onchange="previewFile()"><br>
<img id="userIMG" src="" height="200" alt="Image preview...">
<script>
   function previewFile(){
       var preview = document.querySelector('img'); //selects the query named img
       var file    = document.querySelector('input[type=file]').files[0]; //sames as here
       var reader  = new FileReader();

       reader.onloadend = function () {
           preview.src = reader.result;
       }

       if (file) {
           reader.readAsDataURL(file); //reads the data as a URL
       } else {
           preview.src = "";
       }
  }

  previewFile();  //calls the function named previewFile()
  </script>

<div class="slidecontainer">
  <p>Blur Range Slider</p>
  <input type="range" min="1" max="100" value="50" class="slider" id="efBlur-RANGE">
</div>
<script>
function effectBlur() {
    // Standard syntax
    var x = document.getElementById("efBlur-RANGE").value;
    document.getElementById("userIMG").style.blur = "blur(x%)";

    // Safari 6.0 - 9.0
    var x = document.getElementById("efBlur-RANGE").value;
    document.getElementById("userIMG").style.WebkitBlur = "blur(x%)";  
}
</script>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 30 июня 2018

В вашем коде много проблем: свойство Webkit не существует, процентное значение недопустимо в фильтре размытия, x не является переменной, ... Исправлен код для вас 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: black;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}
</style>
</head>
<body>

<input type="file" onchange="previewFile()"><br>
<img id="userIMG" src="" height="200" alt="Image preview...">
<script>
   function previewFile(){
       var preview = document.querySelector('img'); //selects the query named img
       var file    = document.querySelector('input[type=file]').files[0]; //sames as here
       var reader  = new FileReader();

       reader.onloadend = function () {
           preview.src = reader.result;
       }

       if (file) {
           reader.readAsDataURL(file); //reads the data as a URL
       } else {
           preview.src = "";
       }
  }

  previewFile();  //calls the function named previewFile()
  </script>

<div class="slidecontainer">
  <p>Blur Range Slider</p>
  <input type="range" min="0" max="30" value="2" class="slider" id="efBlur-RANGE">
</div>
<script>
    // Standard syntax
  var efBlur = document.getElementById("efBlur-RANGE")
  efBlur.onchange = function(evt) {
    var x = evt.target.value;
    document.getElementById("userIMG").style.filter = "blur("+x+"px)";

    // Safari 6.0 - 9.0
  document.getElementById("userIMG").setAttribute("style","-webkit-filter:blur(" + x + "px)")

}
</script>
</body>
</html>
0 голосов
/ 30 июня 2018

Вам необходимо добавить прослушиватель событий к вашему вводу. Это будет запускать вашу функцию каждый раз, когда вы меняете вход.

Также используйте filter: blur(x px); для размытия CSS

Я думаю, что это может вызвать проблемы с IE, проверено на caniuse 

function effectBlur() {
    // Standard syntax
    var x = document.getElementById("efBlur-RANGE").value;
    document.getElementById("userIMG").style.filter = "blur("+x+"px)";

    // Safari 6.0 - 9.0
    var x = document.getElementById("efBlur-RANGE").value;
    document.getElementById("userIMG").style.WebkitBlur = "blur(x%)";  
}

document.getElementById('efBlur-RANGE').addEventListener('change', effectBlur)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: black;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}
</style>
</head>
<body>

<input type="file" onchange="previewFile()"><br>
<img id="userIMG" src="" height="200" alt="Image preview...">
<script>
   function previewFile(){
       var preview = document.querySelector('img'); //selects the query named img
       var file    = document.querySelector('input[type=file]').files[0]; //sames as here
       var reader  = new FileReader();

       reader.onloadend = function () {
           preview.src = reader.result;
       }

       if (file) {
           reader.readAsDataURL(file); //reads the data as a URL
       } else {
           preview.src = "";
       }
  }

  previewFile();  //calls the function named previewFile()
  </script>

<div class="slidecontainer">
  <p>Blur Range Slider</p>
  <input type="range" min="0" max="10" value="5" class="slider" id="efBlur-RANGE">
</div>
<script>

</script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...