Фильтры CSS — это мощный инструмент для работы с изображениями, использующий только CSS. Реализовавшись во всех браузерах, вы сможете применять эффекты к изображениям без необходимости использования внешнего программного обеспечения.
CSS-фильтры сами по себе составляют огромную тему, и я не буду обсуждать все доступные фильтры здесь. Я собираюсь рассказать о том, как вы можете использовать несколько фильтров для создания сложного эффекта — и создать свой собственный редактор изображений.
Если вы хотите копнуть глубже, не стесняйтесь проверить Фильтры в MDN или Понимание CSS Filter Effects , в HTML5 Rocks, оба из которых более подробно охватывают общую тему фильтров.
Синтаксис CSS-фильтра
Чтобы написать эффект фильтра в вашем CSS, просто используйте filter: и имя фильтра (например, grayscale , blur и т. Д.).
.example { filter: <filter-function> [<filter-function>]; }
Вот как бы вы применили 90% -й фильтр grayscale к элементу:
.example { filter: grayscale(90%); }
А в случае браузеров webkit вам понадобится префикс:
.example { -webkit-filter: grayscale(90%); }
Значение свойства фильтра обычно находится между 0 и 1, но есть несколько исключений. Например, свойство blur использует пиксельные единицы и может быть любым целым числом. Кроме того, значение фильтра hue-rotate является целым числом с единицей измерения ‘deg’.
.example { filter: blur(10px); } .example-2 { filter: hue-rotate(90deg); }
Объединение нескольких фильтров
Вы можете комбинировать любое количество функций для управления рендерингом. Однако, если вы хотите применить более одного эффекта фильтра, вы можете сделать это, разделив их пробелом в одном объявлении. Вот как вы можете объединить grayscale и blur :
.example { filter: grayscale(0.5) blur(10px); }
Сборка редактора изображений
Наш редактор изображений будет состоять из двух частей:
- Поле URL и контейнер изображений, чтобы разрешить загрузку изображения через внешний URL.
- Элементы управления, которые будут ползунками для применения различных эффектов к загруженному изображению.
Поле URL и контейнер изображений
Мы будем использовать два элемента формы для запроса URL-адреса изображения: ввод текста и кнопку. Затем мы загрузим изображение, присутствующее в URL, в наш div imageContainer .
Вот HTML-код:
<!-- Form for collecting image URL --> <form id="urlBox" class="center"> <input class="url-box" type="url" id="imgUrl"> <input id="go" type="button" value="Go"> </form> <!-- container where image will be loaded--> <div id="imageContainer" class="center"> <img src="/default.png" alt=""> </div>
А вот и JQuery:
// adding an image via url box function addImage(e) { var imgUrl = $('#imgUrl').val(); if (imgUrl.length) { $('#imageContainer img').attr('src', imgUrl); } e.preventDefault(); } // on click of go(submit) button, addImage() will be called $('#go').click(addImage); // on pressing return(enter), addImage() will be called $('#urlBox').submit(addImage);
управления
Это сердце нашего приложения, и именно здесь мы будем работать с нашим исходным изображением, чтобы преобразовать его во что-то другое.
Чтобы получить значения для разных фильтров, мы будем использовать селекторы диапазона. Это позволит нам увидеть эффект наших изменений мгновенно. Вот код для добавления двух селекторов диапазонов — один для grayscale а другой для blur (для простоты здесь есть только два примера, но исходный код имеет 9 вариантов):
Это HTML:
<!--Controls for CSS filters via range input--> <form id="imageEditor"> <p> <label for="gs">Grayscale</label> <input id="gs" name="gs" type="range" min="0" max="100" value="0"> </p> <p> <label for="blur">Blur</label> <input id="blur" name="blur" type="range" min="0" max="10" value="0"> </p> </form>
Чтобы применить эффекты изменений к фильтрам CSS при изменении значения ползунка, вот jQuery:
// Editing image via css properties function editImage() { var gs = $('#gs').val(); // grayscale var blur = $('#blur').val(); // blur $('#imageContainer img').css('-webkit-filter', 'grayscale(' + gs + '%) blur(' + blur + 'px'); } // When sliders change, image will be // updated via the editImage() function $('input[type=range]').change(editImage).mousemove(editImage);
Всякий раз, когда ползунок настраивается, editImage() функция editImage() . editImage() сначала сохраняет значение ползунка в соответствующих переменных ( gs и blur ), а затем применяет их к изображению.
Здесь важно помнить о единицах применяемого filter . Как видно из приведенного выше кода, это «%» для фильтра grayscale() и «px» для фильтра blur() .
Теперь вы можете использовать приведенный выше код, чтобы добавить все фильтры и иметь свой собственный крошечный редактор изображений.
Демо и полный код
Вы можете просмотреть окончательный редактор изображений со всеми 9 действующими фильтрами здесь . Или загрузите полный код демо на GitHub .
Теперь, когда вы знакомы со всей мощью CSS, которая позволяет вам манипулировать изображением, вам обязательно следует попробовать свойство filter в следующем проекте. Если вам интересно, вы можете попробовать добавить следующие функции в текущее приложение и сделать его более полезным:
- Возможность загрузить изображение с рабочего стола.
- Возможность скачать измененное изображение.
Не стесняйтесь, чтобы раскошелиться и отправить запрос тянуть . Рад сотрудничать!