css для достижения эффекта резкости

внешний интерфейс CSS

"Это 9-й день моего участия в августовском испытании обновлений.Подробности о мероприятии:Испытание августовского обновления"

Реализация эффекта резкости

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

Про заточку гуглил давно, и наконец нашел решение:

То есть использовать svg, чтобы написать фильтр резкости как слой-маску, а затем применить его к соответствующему элементу, код такой:

<div>
<img id="sample-image"
    src="https://images.westend61.de/0000859335pw/close-up-of-full-shopping-cart-in-grocery-store-CAIF15555.jpg">
</div>

<svg>
    <defs>
        <filter id="unsharpy">
            <feGaussianBlur  result="blurOut" in="SourceGraphic" stdDeviation="5"/>
            <feComposite operator="arithmetic" k1="0" k2="1.3" k3="-0.3" k4="0"
            in="SourceGraphic" in2="blurOut" />
        </filter>
    </defs>
</svg>

div {
filter: url(#unsharpy);
}

#sample-image {
  margin-left: 50px;
  width: 600px;
  height: 400px;
}

Регулировка степени резкости изменяется путем модификации stdDeviation.Текущее значение равно 5. Чем больше степень, тем выше степень резкости.

Среди них часть svg также может быть выражена матрицей

<div>
<img id="sample-image"
    src="https://images.westend61.de/0000859335pw/close-up-of-full-shopping-cart-in-grocery-store-CAIF15555.jpg">
</div>

<svg>
    <defs>
        <filter id="sharpy">
            <feConvolveMatrix order="3" kernelMatrix="0 -1 0 -1 5 -1 0 -1 0"/>
        </filter>
    </defs>
</svg>


div {
filter: url(#sharpy);
}

#sample-image {
  margin-left: 50px;
  width: 600px;
  height: 400px;
}

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

image.png

Принцип работы feConvolveMatrix следующий:developer.Mozilla.org/this-cn/docs/…

Справочник фильтра CSS

фильтр Парафраз
filter:blur(5px) размыто
filter:brightness(1.4) яркость
filter:contrast(200%) Контраст
filter:drop-shadow(4px 4px 8px blue) проекция
filter:grayscale(50%) Оттенки серого
filter:hue-rotate(90deg) Изменение оттенка
filter:invert(75%) инвертировать
filter:opacity(25%) прозрачность
filter:saturate(230%) насыщенность
filter:sepia(60%) коричневый

Эти фильтры можно использовать в комбинации, например

filter: contrast(175%) brightness(3%);

Дополнительные учебные ресурсы

На самом деле, фильтр CSS и фильтр SVG могут добиться более крутых результатов, вы можете взглянуть на следующую статью, вы будете больше думать о применении фильтра в работе.у-у-у-у. palms.com/WordPress/2…

Внезапно я обнаружил, что многие непопулярные знания во фронтенде могут быть использованы в работе.Жизнь не заканчивается, продолжайте бороться!

Категории