Размытие по Гауссу (эффект матового стекла) реализация
Исходный код, добро пожаловать в звезду
1: CSS
2: Canvas StackBlur.js заимствован
3: свг
Метод, выбранный в этой статье Преимущества: меньше, чем библиотека холста, алгоритм исходного кода библиотеки труднее понять; реализация лучше, чем эффект стиля css, и край css станет размытым, когда фильтр большой, и эффект плохой.
решение
Примечания к документации
Атрибут id тега определяет уникальное имя фильтра (один и тот же фильтр может использоваться несколькими элементами в документе).
Атрибут filter:url используется для связи элемента с фильтром. При связывании идентификаторов фильтров необходимо использовать символ #.
Эффекты фильтра определяются с помощью тега . Суффикс fe можно использовать для всех фильтров
Атрибут stdDeviation тега определяет степень размытия.
in="SourceGraphic" Этот раздел определяет эффект, созданный из всего изображения.
Шаг 2: используйте
Экземпляр предоставляет два интерфейса, setBlurAmount и generateBlurredImage, которые устанавливаются динамически.