Это, вероятно, самая простая библиотека для реализации размытия по Гауссу (матовое стекло).

JavaScript SVG


Размытие по Гауссу (эффект матового стекла) реализация

Исходный код, добро пожаловать в звезду

1: CSS


2: Canvas StackBlur.js заимствован

3: свг

Метод, выбранный в этой статье Преимущества: меньше, чем библиотека холста, алгоритм исходного кода библиотеки труднее понять; реализация лучше, чем эффект стиля css, и край css станет размытым, когда фильтр большой, и эффект плохой.

решение


Примечания к документации

Атрибут id тега определяет уникальное имя фильтра (один и тот же фильтр может использоваться несколькими элементами в документе).
Атрибут filter:url используется для связи элемента с фильтром. При связывании идентификаторов фильтров необходимо использовать символ #.
Эффекты фильтра определяются с помощью тега . Суффикс fe можно использовать для всех фильтров
Атрибут stdDeviation тега определяет степень размытия.
in="SourceGraphic" Этот раздел определяет эффект, созданный из всего изображения.

Шаг 2: используйте


Экземпляр предоставляет два интерфейса, setBlurAmount и generateBlurredImage, которые устанавливаются динамически.

Добро пожаловать в исходный код