photo-editor-js

Простой кастомизируемый редактор фотографий для веб-приложений.

Примеры

• Простой карандаш
• Все встроенные инструменты

Установка

npm install photo-editor --save
yarn add photo-editor

Использование

Инициализация редактора

import { PhotoEditor } from 'photo-editor';

const photoEditor = new PhotoEditor(canvasEl, options);

canvasEl - DOM-элемент, на котором производится редактирование фотографий. Обязательно должен являться canvas-ом.

options:

| Параметр | Обязательный | Описание | | -------- | ------------ | -------- | | tools | + | Объект, ключами которого язляются id используемых интсрументов, а значениями - их классы. О создании инструментов ниже. | | sourceType | - | Тип источника, из которого будет взято исходное изображение. Возможны значения: current-canvas (текущий canvas), canvas (другой canvas), img (картинка со страницы), base64 (base64-строка изображения). По умолчанию current-canvas. | | source | если sourceType - не current-canvas | Источник, из которого будет взято исходное изображение. Если sourceType - current-canvas, то не используется, если canvas, то HTMLCanvasElement, если img, то HTMLImageElement, если base64, то base64-строка. |

Создание инструмента

import { Tool } from 'photo-editor';

class MyTool extends Tool {
  ...
}

Свойства базового класса:

| Название | Описание | | -------- | -------- | | el | canvas-элемент, на котором происходит рисование. | | enabled | Включен ли инструмент на данный момент. |

Методы базового класса:

| Название | Аргументы | Описание | | -------- | --------- | -------- | | pushState | base64-строка | Сохранить состояние для возможности вернуться к нему, используя методы undo и redo редактора. | | updateState | base64-строка | Изменение последнего сохраненного состояния. | | disable | - | Выключить инструмент. |

Методы инструмента:

| Название | Описание | | -------- | -------- | | onBeforeDisable | Вызывается перед выключением инструмента. | | onAfterDisable | Вызывается после выключения инструмента. | | onBeforeEnable | Вызывается перед включением инструмента. | | onAfterEnable | Вызывается после включения инструмента. | | onBeforeDestroy | Вызывается перед удалением инструмента. |

Также Tool унаследован от EventEmitter.

Использование редактора

Методы

| Название | Аргументы | Описание | | -------- | --------- | -------- | | getCurrentState | - | Получить base64 последнего сохранённого состояния (если нет, инициализационного). | | enableTool | id инструмента | Включить определённый инструмент. Если включен какой-то другой инструмент, он будет выключен. | | disableTool | - | Выключить включенный инструмент. | | toggleTool | id инструмента | Если включен определённый инстумент, выключить его, если выключен - включить. Если включен какой-то другой инструмент, он будет выключен. | | undo | - | Вернуть редактор к предыдущему сохранённому состоянию. | | redo | - | Вернуть редактор к следующему сохранённому состоянию. |

События

PhotoEditor унаследован от EventEmitter.

| Название события | Аргументы | Когда вызывается | | ---------------- | --------- | -------- | | ready | - | После того, как проинициализированы редактор и все инструменты, и на canvas-е нарисовано изображение для инициализации. | | enableTool | toolId (id включенного инструмента) | После включения инструмента. | | disableTool | - | После выключения инструмента. |

Доступ к инструментам

Все инструменты редактора доступны по ключу в поле tools, например,

import { PhotoEditor } from 'photo-editor';
import { Crop } from 'photo-editor/tools';

const photoEditor = new PhotoEditor(canvasEl, {
  tools: {
    crop: Crop,
  },
});

photoEditor.tools.crop.applyCrop();

Встроенные инструменты

import {
  Blur,
  Brightness,
  Crop,
  Contrast,
  Rectangle,
  RotateLeft,
  RotateRight,
} from 'photo-editor/tools';

Blur

Размытие части изображения с помощью кисти.

Brightness

Изменение яркости всего изображения.

Crop

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

События

| Название события | Аргументы | Когда вызывается | | ---------------- | --------- | -------- | | set | - | После того, как выбрана прямоугольная область. | | unset | - | После того, как выбор прямоугольнай области отменён. |

Contrast

Изменение контрастности всего изображения.

Rectangle

Рисование красного прямоугольника.

RotateLeft

Поворот изображения на 90 градусов против часовой стрелки. Срабатывает сразу после включения инструмента.

RotateRight

Поворот изображения на 90 градусов по часовой стрелке. Срабатывает сразу после включения инструмента.