Создание редактора изображений с помощью CamanJS: применение базовых фильтров

Russian (Pусский) translation by Anna Goorikova (you can also view the original English article)

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

Использование CSS фильтров и режимов наложения в большинстве случаев работает хорошо. Однако CSS не изменяет пиксели самого изображения. Другими словами, фильтры и режимы наложения или любые другие эффекты не являются постоянными.

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

Если вы хотите, чтобы изменения изображений были постоянными и чтобы пользователь мог загрузить измененное изображение, вы можете использовать холст(canvas) HTML5. Элемент canvas позволяет вам делать много вещей, включая рисование линий и фигур, написание текста и анимацию рендеринга.

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

Библиотека поддерживает основные эффекты, такие как яркость, контрастность и насыщенность. Это позволит сэкономить время и позволит нам создавать более сложные фильтры на основе этих базовых.

Основы CamanJS

Имя этой библиотеки основано на том, что она используется для выполнения (ca) nvas (man) ipulation на JavaScript (JS). Прежде чем вы сможете начать использовать различные функции библиотеки, вам придется включить ее в свой проект. Это можно сделать либо путем загрузки библиотеки и ее размещения самостоятельно, либо путем непосредственного связывания с CDN.

Существует два способа использования библиотеки. Первый вариант - использовать атрибут data-caman с вашими элементами изображения. Этот атрибут может принимать комбинацию различных фильтров CamanJS в качестве значения. Например, если вы хотите увеличить яркость изображения на 20 и контраст на 10, вы можете использовать следующий HTML:

1	<img src="path/to/image.jpg"
2	data-caman="brightness(20) contrast(10)">

Аналогично, вы можете применять другие фильтры, такие как насыщенность, экспозиция, шум, сепия и т. д. Помимо основных фильтров, CamanJS также предоставляет вам доступ к более сложным фильтрам из коробки. Эти фильтры могут быть применены к изображению аналогичным образом. Чтобы применить фильтр sunrise , вы можете просто использовать следующий HTML:

1	<img src="path/to/image.jpg"
2	data-caman="sunrise()">

Второй способ манипулирования изображениями - вызов Caman() с id холста, где вы визуализировали изображение и различные фильтры, которые вы хотите применить к визуализированному изображению.

Caman('#canvas-id', function () {
    this.brightness(20);
    this.contrast(10);
    this.render();
});

В этом курсе мы будем использовать JavaScript для создания нашего редактора изображений.

Реализация функций загрузки и выгрузки

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

Начнем с HTML, необходимого для добавления холста и кнопок загрузки/выгрузки:

<div class="preview-wrapper">
    <canvas id="canvas"></canvas>
    <p class="process-message"></p>
</div>

<div class="editor-buttons">
    <input type="file" id="upload-file" placeholder="Upload a Picture" />
    <label for="upload-file">Upload a Picture</label>
    <button id="download-btn">Download Image</button>
    <br/>
</div>

Ниже приведен код для реализации базовой функции загрузки изображений:

var img = new Image();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var fileName = '';

$("#upload-file").on("change", function(){
    var file = document.querySelector('#upload-file').files[0];
    var reader = new FileReader();
    if (file) {
        fileName = file.name;
        reader.readAsDataURL(file);
    }
    reader.addEventListener("load", function () {
        img = new Image();
        img.src = reader.result;
        img.onload = function () {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            $("#canvas").removeAttr("data-caman-id");
        }
    }, false);
});

Мы начнем с создания некоторых переменных для хранения имени файла изображения, выбранного пользователем, и контекста для нашего холста. После этого мы пишем код, чтобы получить файл изображения из файла input после запуска события change. Файлы, выбранные пользователем, хранятся в FileList, и мы можем получить первый файл из списка, используя .files[0].

Когда у нас уже есть файл, мы используем объект FileReader, чтобы прочитать его содержимое. Событие onload для FileReader запускается после успешного чтения выбранного файла.

Внутри обработчика событий onload для объекта FileReader мы создаем экземпляр HTMLImageElement с помощью конструктора Image(). Атрибут src изображения затем устанавливается в значение свойства result нашего FileReader.

После успешной загрузки изображения мы устанавливаем ширину и высоту холста равной width и height выбранного пользователем изображения. После этого мы рисуем изображение на холсте и удаляем атрибут data-caman-id с холста.

Атрибут добавляется автоматически CamanJS при настройке холста для редактирования изображения. Мы должны удалять его каждый раз, когда пользователь выбирает новый файл, чтобы избежать путаницы между старым файлом изображения, который мы редактировали, и новым файлом, выбранным пользователем.

Помимо загрузки файла изображения на холст, мы также установили значение переменной fileName равным имени файла, выбранного пользователем. Это будет полезно при сохранении отредактированного изображения.

Теперь пользователи смогут загружать различные изображения в редактор изображений. После того, как они отредактировали изображение, они также хотели бы, скачать их. Давайте напишем код, который позволит пользователям сохранить отредактированный файл изображения.

$('#download-btn').on('click', function (e) {
    var fileExtension = fileName.slice(-4);
    if (fileExtension == '.jpg' || fileExtension == '.png') {
        var actualName = fileName.substring(0, fileName.length - 4);
    }
    download(canvas, actualName + '-edited.jpg');
});

function download(canvas, filename) {
    var  e;
    var lnk = document.createElement('a');
    
    lnk.download = filename;
    lnk.href = canvas.toDataURL("image/jpeg", 0.8);
    
    if (document.createEvent) {
        e = document.createEvent("MouseEvents");
        e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        lnk.dispatchEvent(e);
    }
    else if (lnk.fireEvent) {
        lnk.fireEvent("onclick");
    }
}

Мы используем метод jQuery .on() для выполнения фрагмента кода каждый раз, когда событие click срабатывает для кнопки загрузки. Этот код удаляет расширение файла из имени файла изображения, выбранного пользователем, и заменяет его с суффиксом-edited.jpg. Затем это имя передается в функцию download вместе со ссылкой на холст, где мы отрисовывали и редактировали изображение.

Функция download создает ссылку и устанавливает ее атрибут download в filename. Атрибут href содержит URI данных для редактируемого изображения. После установки значения этих двух атрибутов мы программно запускаем событие click для вновь созданной ссылки. Этот клик запускает загрузку отредактированного изображения.

Применение встроенных фильтров

Как я уже упоминал в начале урока, CamanJS поставляется с базовыми встроенными фильтрами. Таким образом, вы можете непосредственно применять яркость, контраст, сепию, насыщенность, экспозицию, шум, резкость, вибрацию и оттенок. Некоторые фильтры, такие как яркость и контрастность, могут иметь как отрицательное, так и положительное значение.

Вы можете сделать значения такими высокими или низкими, как хотите, но разумным выбором будет устанавливать их между -100 и 100. Например, изображение становится белым при установке яркости 100. Поэтому любое значение выше 100 будет бесполезно. Аналогично, изображение станет полностью серым, если установить значение контраста в -100.

Другие фильтры, такие как сепия, шум, резкость и размытие, принимают только положительные значения. Имейте в виду, что фильтр оттенков покрывает полный круг 360 градусов со значениями от 0 до 100. Изображение будет выглядеть точно так же, когда вы установите оттенок в 0 или 100.

Вот HTML, чтобы добавить кнопки для нашего редактора изображений:

<div class="filter-buttons">
    <div class="filter-group">
        <button id="brightness-dec">-</button>
        <span class="filter-name">Brightness</span>
        <button id="brightness-inc">+</button>
    </div>
    <!-- More Such Buttons -->
    <div class="filter-group">
        <button id="gamma-dec" class="disabled">-</button>
        <span class="filter-name">Gamma</span>
        <button id="gamma-inc">+</button>
    </div>
</div>
<div class="editor-buttons">
    <input type="file" id="upload-file" placeholder="Upload a Picture" />
    <label for="upload-file">Upload a Picture</label>
    <button id="download-btn">Download Image</button>
    <br/>
    <button id="vintage-btn">Vintage</button>
    <!-- More Such Buttons -->
    <button id="lomo-btn">Lomo</button>
</div>

Все фильтры, такие как яркость и контрастность, получили кнопки увеличения и уменьшения. Тем не менее, кнопка уменьшить была отключена для некоторых фильтров, таких как шум, потому что они не могут иметь значимое отрицательное значение.

Мы будем применять соответствующие фильтры на основе кнопки, нажатой с помощью следующего JavaScript.

/* Similar Code for All Other Buttons */

$('#brightness-inc').on('click', function (e) {
    Caman('#canvas', img, function () {
        this.brightness(10).render();
    });
});

$('#brightness-dec').on('click', function (e) {
    Caman('#canvas', img, function () {
        this.brightness(-10).render();
    });
});


/* Similar Code for All Inbuilt Filters */

$('#nostalgia-btn').on('click', function (e) {
    Caman('#canvas', img, function () {
        this.nostalgia().render();
    });
});

$('#majestic-btn').on('click', function (e) {
    Caman('#canvas', img, function () {
        this.herMajesty().render();
    });
});

Для кнопок увеличения и уменьшения сила фильтра зависит от того, как масштабируется его эффект. Например, яркость и контрастность увеличиваются на 10, а значение гаммы увеличивается только на 0.1 после каждого клика.

Следующая демонстрация CodePen показывает в действии редактор изображений CamanJS, который мы создали.

Please accept marketing cookies to load this content.

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

Заключительные мысли

Первое учебное пособие предназначалось для того, чтобы научить вас создавать редактор изображений с базовыми функциями загрузки и скачки изображений, которые пользователи могут использовать для редактирования изображений. Мы использовали базовые фильтры, такие как шум, контраст и яркость, а также некоторые более сложные эффекты, такие как Vintage и Nostalgia, которые встроены в библиотеку.

В следующем уроке вы узнаете больше о возможностях CamanJS, таких как слои, режимы смешивания и события. А пока не забывайте просматривать то, что есть на Envato Market для покупки, изучения, использования и обзора.