SVG-фильтр для получения эффекта сепии на фотографии
Сепия — это оттенки коричневого цвета, который появляется на старых черно-белых фотографиях. В современной фотографии цвета сепии часто ассоциируются со стариной и это модно. Во многих цифровых фотоаппаратах и есть функция имитации таких фотографий. Приятный цветовой эффект обусловил востребованность фильтров для придания эффекта сепии. Покажем на примере, как это можно сделать прямо на лету с фотографией на сайте. Для начала покажем исходное изображение в цвете.
А теперь применим фильтр сепии к этому изображению для того, чтобы из исходного изображения получить изображение с имитацией старой фотографии. Причем, преобразование выполняется онлайн из исходной картинки. На нашем сервере нет изображения с сепией. Оно получилось при формировании страницы. В этом можно убедиться нажав правую кнопку мышки, когда курсор расположен на фото. Картинки для сохранения нет.
Код svg-фильтра сепии, который был применен, приведен ниже.
SVG- фильтр сепии применялся к цветной картинке:
Полный код фильтра для получения эффекта сепии можно посмотреть здесь. Например, такой подход можно применить, если вы хотите, чтобы добавляемые вашими пользователями фотки на ваш сайт, сразу же обрабатывались и становились похожими на старые фотографии. А теперь немного теории.
Фильтр feColorMatrix позволяет умножить каждый пиксель исходного изображения в виде вектора, образованного каналами R, G, B, A и дополненного до размерности 5, на матрицу 5×5. В результате мы получим вектор, представляющий из себя каналы R', G', B', A' каждого пикселя результирующего изображения. Эффект “сепия” можно получить с помощью следующей матрицы:
\[\begin{bmatrix}0.343 & 0.669 & 0.119 & 0 & 0\\
0.249 & 0.626 & 0.130 & 0 & 0\\
0.172 & 0.334 & 0.111 & 0 & 0\\
0 & 0 & 0 & 1 & 0\\
0 & 0 & 0 & 0 & 1 \end{bmatrix}\]
Последнюю строку в фильтр записывать не надо - она всегда одна и та же. Матрица записывается в атрибут values фильтра fecolormatrix с типом matrix в виде значений, разделенных пробелом. Все очень просто и понятно.
А теперь применим фильтр сепии к этому изображению для того, чтобы из исходного изображения получить изображение с имитацией старой фотографии. Причем, преобразование выполняется онлайн из исходной картинки. На нашем сервере нет изображения с сепией. Оно получилось при формировании страницы. В этом можно убедиться нажав правую кнопку мышки, когда курсор расположен на фото. Картинки для сохранения нет.
Код svg-фильтра сепии, который был применен, приведен ниже.
SVG- фильтр сепии применялся к цветной картинке:
Полный код фильтра для получения эффекта сепии можно посмотреть здесь. Например, такой подход можно применить, если вы хотите, чтобы добавляемые вашими пользователями фотки на ваш сайт, сразу же обрабатывались и становились похожими на старые фотографии. А теперь немного теории.
Фильтр feColorMatrix позволяет умножить каждый пиксель исходного изображения в виде вектора, образованного каналами R, G, B, A и дополненного до размерности 5, на матрицу 5×5. В результате мы получим вектор, представляющий из себя каналы R', G', B', A' каждого пикселя результирующего изображения. Эффект “сепия” можно получить с помощью следующей матрицы:
Похожие публикации: