Некоторое время назад я искал библиотеку для работы с изображениями, которую можно было бы использовать в личном проекте. Одна библиотека, которую я нашел и которая мне больше всего понравилась , была CamanJS , библиотека для работы с холстом на основе JavaScript.
Но подождите … Так как CSS поддерживает базовую функциональность манипулирования изображениями из коробки, вы можете спросить, почему мы хотели бы использовать библиотеку JavaScript для этого. Ну, кроме поддержки браузера, использование CamanJS имеет много преимуществ. Он предоставляет гораздо больше фильтров и опций для работы с изображениями. Вы можете создавать свои собственные расширенные фильтры и контролировать каждый пиксель изображения. Вы можете использовать его встроенные режимы наложения и систему наложения. И это позволяет вам манипулировать междоменными изображениями и сохранять манипулированные изображения.
Теперь давайте начнем исследовать возможности, которые предлагает CamanJS!
Включая необходимые файлы
Чтобы начать работать с CamanJS, просто включите библиотеку на своей странице. Эта уменьшенная версия CDN, на которую я здесь ссылаюсь, содержит все плагины в дополнение к основным функциям, объединенным в один файл:
<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script> Синтаксис для функций немного изменился с версии 3 до 4 CamanJS. поэтому убедитесь, что вы включили версию больше 4 при работе с этим учебником.
Управление изображениями с помощью атрибутов HTML
CamanJS можно использовать для управления изображениями с помощью атрибута data-caman . Приведенный ниже код демонстрирует, как применить к изображению фильтр яркости «10» и контраст «30»:
<img data-caman="brightness(10) contrast(30)" src="yourimage.jpg">
Аналогичный синтаксис используется для остальных 18 фильтров, которые поставляются в комплекте с библиотекой. Например:
<img data-caman="love() hazyDays()" src="yourimage.jpg">
Управление изображениями с помощью JavaScript
Кроме того, вы можете написать несколько строк JavaScript для управления изображением. Результат при использовании JavaScript ничем не отличается от использования атрибутов data-caman .
Caman('#your-image-id', function () { this.brightness(40); this.contrast(-10); this.sinCity(); this.render(); });
Реализация элементов управления для редактора изображений
Фильтры, которые не требуют особой настройки, могут быть активированы при нажатии кнопки. Некоторые фильтры, такие как vintage() , lomo() и sinCity() , не требуют параметра. Для других фильтров, таких как contrast() и noise() необходимо целочисленное значение в качестве параметра Это значение определяет прочность фильтров.
Сложные фильтры, такие как tiltShift() , tiltShift() и tiltShift() , требуют более одного параметра. Приведенный ниже фрагмент кода демонстрирует, как работать с тремя из этих фильтров. Другие фильтры могут быть закодированы аналогично. Вот HTML-код:
<canvas id="canvas"></canvas> <button id="vintagebtn">Vintage</button> <button id="noisebtn">Noise</button> <button id="tiltshiftbtn">Tilt Shift</button>
Вот JavaScript / JQuery для применения фильтров по нажатию кнопки:
var vintage = $('#vintagebtn'); var noise = $('#noisebtn'); var tiltshift = $('#tiltshiftbtn'); vintage.on('click', function(e) { Caman('#canvas', img, function() { this.vintage(); this.render(); }); }); noise.on('click', function(e) { Caman('#canvas', img, function() { this.noise(10); this.render(); }); }); tiltshift.on('click', function(e) { Caman('#canvas', img, function() { this.tiltShift({ angle: 90, focusWidth: 600 }).render(); }); });
tiltshift() также принимает дополнительные параметры, такие как startRadius и radiusFactor . vignette() принимает два параметра size и strength . Вы можете обратиться к документации CamanJS, чтобы глубже понять все доступные фильтры.
Реализация ползунковых элементов управления
Фильтры, такие как яркость, контрастность и оттенок, которые требуют сравнительно более детального управления их значениями, прекрасно работают с ползунками входного диапазона. Как вы увидите, реализация элементов управления ползунка немного отличается от кнопок управления. Вы можете использовать следующий HTML для создания ползунков диапазона:
<form id="silderInput"> <label for="hue">Hue</label> <input id="hue" name="hue" type="range" min="0" max="300" value="0"> <label for="contrast">Contrast</label> <input id="contrast" name="contrast" type="range" min="-20" max="20" value="0"> </form>
Этот блок jQuery обрабатывает все манипуляции:
$('input[type=range]').change(applyFilters); function applyFilters() { var hue = parseInt($('#hue').val()); var cntrst = parseInt($('#contrast').val()); Caman('#canvas', 'image.jpg', function() { this.revert(false); this.hue(hue); this.contrast(cntrst); this.render(); }); }
Функция applyFilters() вызывается всякий раз, когда любой из ползунков входного диапазона меняет свое значение. Эта функция сохраняет значение всех ползунков диапазона в соответствующих переменных. Эти значения затем передаются в качестве параметров в соответствующие фильтры для редактирования изображения.
Я вызываю this.revert(false) каждый раз, когда применяю эти фильтры, чтобы холст возвращался в исходное состояние. Использование revert позволяет убедиться, что фильтры манипулируют исходным изображением, и их эффект не является составным. Значение false передаваемое в качестве параметра, позволяет избежать кратковременной вспышки исходного изображения во время процесса возврата.
Еще одна заслуживающая внимания деталь — я снова применяю все фильтры, даже если только один из них изменяется в стоимости. Это связано с тем, что пользователи не ожидают, что контраст будет сброшен при настройке значения оттенка или яркости.
Создание пользовательских фильтров в CamanJS
Одна из замечательных особенностей этой библиотеки — вы можете расширить ее, создав собственные фильтры и плагины. Есть два способа создания пользовательских фильтров. Вы можете комбинировать встроенные фильтры с соответствующими значениями или создать свой собственный фильтр с нуля.
Вот jQuery для создания собственного фильтра:
Caman.Filter.register('oldpaper', function() { this.pinhole(); this.noise(10); this.orangePeel(); this.render(); });
Чтобы создать фильтры с нуля, вам потребуется проделать дополнительную работу из-за нескольких существующих ошибок, о которых вы можете прочитать в этом открытом выпуске репозитория GitHub .
Слои и режимы наложения
Помимо фильтров, CamanJS поставляется с продвинутой системой наслоения. Это дает вам гораздо больше возможностей и возможностей для работы с изображениями. В отличие от Photoshop, слои в CamanJS могут быть вложенными. Он использует режимы наложения, чтобы применять слои к своим родителям. Режим смешивания по умолчанию normal . CamanJS имеет в общей сложности десять режимов overlay , включая такие, как multiply , exclusion и overlay .
Ниже приведен jQuery для создания пользовательского фильтра с использованием слоев и режимов наложения:
Caman.Filter.register('greenTint', function() { this.brightness(-10); this.newLayer(function() { this.setBlendingMode("overlay"); this.opacity(100); this.fillColor('#689900'); this.filter.brightness(15); this.filter.contrast(10); }); this.render(); });
Фильтры могут применяться как к исходному слою, так и к новому слою. Кроме того, вы можете установить несколько других свойств, таких как непрозрачность и режим наложения для нового слоя. Я залил этот слой сплошным цветом, но вы можете заполнить его другим изображением, вызвав this.overlayImage('image.jpg') .
Манипулирование изображениями перекрестного происхождения
Если вам нужно манипулировать изображениями, размещенными в другом домене, вы можете использовать прокси-сервер PHP, который поставляется с CamanJS. Чтобы включить эту функцию, вам нужно разместить этот скрипт PHP на вашем сервере. Этот сценарий будет передавать данные изображения из удаленного источника в ваш браузер, чтобы обойти ограничения редактирования. Затем вам нужно добавить следующую строку в ваш JavaScript:
Caman.remoteProxy = Caman.IO.useProxy('php');
Сохранение отредактированного изображения
CamanJS имеет встроенный механизм сохранения изображений после редактирования. В текущей реализации вызов this.save(png) откроет приглашение для загрузки файла, но вам придется переименовать файл и добавить расширение png или jpg . Это связано с тем, что при вызове этой функции браузеры перенаправляются на кодировку base64 изображения и не знают тип файла. Приведенный ниже фрагмент кода сохраняет изображение:
this.render(function () { this.save('png'); });
Демо и полный код
Вы можете взглянуть на демонстрацию редактора изображений со всеми функциями в действии в этой демонстрации CodePen , снимок экрана приведен ниже:
В качестве упражнения вы можете попытаться улучшить взаимодействие с пользователем, создав некоторый признак того, что фильтры в настоящее время работают с изображением, или измените кнопку сохранения таким образом, чтобы больше не требовалось переименовывать файл.
Как мы уже видели, CamanJS — это невероятно полезная библиотека для работы с изображениями, имеющая множество фильтров и постоянно расширяющиеся функциональные возможности, и в этом уроке я лишь слегка коснулся ее функций.