Размытие изображения с помощью CSS / Javascript: возможно ли это?

ProgramBox

Размытие изображения с помощью CSS / Javascript: возможно ли это?

Post author:admin
Запись опубликована:29 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css #blur

#javascript #jquery #HTML #css #размытие

Вопрос:

Возможно ли добавить эффект размытия к изображению с помощью CSS и Javascript?

Ответ №1:

Да, это работает великолепно:

Pixastic — это экспериментальная библиотека, которая позволяет выполнять различные операции с изображениями, используя всего лишь немного JavaScript. Готовые поддерживаемые эффекты включают обесцвечивание / оттенки серого, инвертирование, переворачивание, настройку яркости / контрастности, оттенок / насыщенность, тиснение, размытие и многие другие…

Pixastic работает с использованием элемента Canvas HTML5, который обеспечивает доступ к необработанным пиксельным данным, открывая тем самым возможности для более продвинутых эффектов изображения. Здесь вступает в игру «экспериментальная» часть. Canvas поддерживается только некоторыми браузерами, и, к сожалению, Internet Explorer не входит в их число. Однако он хорошо поддерживается как в Firefox, так и в Opera, а поддержка Safari появилась только в недавнем выпуске Safari 4 (бета-версия). В настоящее время Chrome работает на канале разработки. Некоторые эффекты были смоделированы в IE с использованием старых проприетарных фильтров. Хотя эти фильтры намного быстрее, чем их друзья на Canvas, их немного и они ограничены. Надеюсь, однажды у нас будет настоящий Canvas и в IE…

1. Испортите спорт — уберите установку IE6 и приступайте к работе с программой! (хотя приветствую 1)

2. @Clyde Lobo: Если вы проверите сайт, вы увидите, что он довольно успешно работает в IE8, который определенно не совместим с HTML5, и образцы работают.

3. @Ardman: В части «Как» сказано Pixastic works by utilizing the HTML5 Canvas element which provides access to raw pixel data , и, насколько мне известно, в IE 8 нет canvas , так как же это работает в нем? Кстати, библиотека потрясающая 😉

4. Если вы читаете сайт, там написано "A few of the effects have been simulated in IE using the age old proprietary filters. While these filters are much faster than their Canvas friends, they are few and limited." . Например, эффект оттенков серого на домашней странице работает в IE8. Я бы предположил, что любой из filter эффектов будет работать даже в IE6.

5. Этому ВОСЕМЬ лет, чего вы ожидали?

Ответ №2:

В качестве альтернативы вы могли бы использовать StackBlur или сверхбыстрое размытие

Ответ №3:

Это тоже полезно учитывать:

http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

http://tympanus.net/codrops/2011/11/18/fullscreen-image-blur-effect-with-html5/

Ответ №4:

Использование CSS

 .cbp-rfgrid li:hover img {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
filter: blur(2px);
}

Ответ №5:

StackBlur работает: вот как я его использую: также работает во всех браузерах и ipad!! в отличие от webkit !!

загрузите StackBlur v5.0 отсюда: StackBlurv5.0

HTML

 <CANVAS ID="top"></CANVAS>
<SCRIPT TYPE="text/javascript" SRC="js/StackBlur.js"></SCRIPT>

CSS

 #top {                      
  border-radius:         28%;
  -o-border-radius:      28%;
  -webkit-border-radius: 28%;
  -moz-border-radius:    28%;
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 40;
  width: 208px;
  height: 208px;
}

 var topCan = document.getElementById("top");
var toptx  = topCan.getContext("2d");
toptx.drawImage(_specimenImage, 0, 0);
var blur   = 0;

blur       = Math.abs(_sliderF.getPosition(8, -8)); //this returns multiple values 
                                                    //based on a new slider position

stackBlurCanvasRGB("top", 0, 0, topCan.width, topCan.height, blur);

Примечания:
Значения Radius для функции stackBlurCanvasRGB могут варьироваться, я думаю, от 100 до -100.. просто поиграйте со значениями, и у вас все получится.
..CanvasRGB работает быстрее, чем CanvasRGBA на iPad .. по крайней мере, это то, что я замечаю на iPad 4-го поколения.

Ответ №6:

С помощью CSS3 мы можем легко настроить изображение. Но помните, что это не меняет изображение. Отображается только скорректированное изображение. Для Chrome

Смотрите демонстрационную версию и полный исходный код здесь

http://purpledesign.in/blog/adjust-an-image-using-css3-html5/

Смотрите следующий код для получения более подробной информации.

Сделать изображение серым:

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

Для придания цвета сепии:

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

Для регулировки яркости:

 img {
 -webkit-filter: brightness(50%);
}

Для настройки контрастности:

 img {
 -webkit-filter: contrast(200%);
}

Размыть изображение:

 img {
 -webkit-filter: blur(10px);
}

Ответ №7:

Попробуйте это:

 let blur = document.querySelector("#blur");
let girlImg = document.querySelector("#girlImg");

blur.addEventListener('input', blurring);
function blurring(){
    girlImg.style.filter = `blur(${blur.value}px)`
}

 <div>
  <span>Blur:</span>
  <input type="range" id="blur" min="0" max="50" value="0">
</div>

</br>

<img id="girlImg" src="https://homepages.cae.wisc.edu/~ece533/images/girl.png" alt="girlImg" />