Регистрация

[JavaScript, Canvas] Collage_n небольшой онлайн редактор, для создания коллажей и цветовых эффектов с открытым исходным кодом — javascript

Ответить на тему
Автор Сообщение
news_bot ®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

Создавать темы news_bot ® написал(а)
25-Авг-2020 14:33
Цитировать


Collage_n — приложение для создания коллажей из картинок: масштабирует, вращает, искажает и перемещает выделенную область изображения.
Cсылка на github и краткое руководство: github.com/SergeyOvechkin/collagen
Пример работы приложения: sergeyovechkin.github.io/collagen/index.html
Редактор работает онлайн с github, достаточно просто перейти по ссылке выше, также его можно скачать себе и запустить на локальном сервере, например на node.js (node app).
Для загрузки картинки нужно указать ее url (сервер на котором размещена картинка должен поддерживать crossorigin запросы), либо загрузить с компъютера нажав кнопку load img.
После загрузки картинку можно масштабировать или отразить, по оси x, y или обоим направлениям.
Для начала работы нужно создать выделение (замкнутый контур) затем его можно отредактировать перемещая либо добавляя контрольные точки, либо сбросить и начать все заново.
Далее после создания контура все что внутри него можно исказить (масштабировать по точкам), для этого нужно нажать на кнопку «Искажать» затем перетаскивать точки в новое положение.
Выделенную область можно залить каким либо цветом, добавить ей прозрачность либо применить какой либо цветовой эффект, а также повернуть ее на какой либо градус.
После всех манипуляций область можно скопировать в спрайт (создать спрайт), а затем переместить в новое положение и создать с него отпечаток на фоновом изображении, спрайты также можно вращать.
При окончании работы спрайт можно сохранить в локальном хранилище нажав на кнопку Save on PC, а затем восстановить нажав Показать сохраненные спрайты => создать
Толщину линий обводки контура и цвет а также другие параметры, можно изменить открыв консоль броузера, далее ввести:
Толщина обводки контура: lineWidth = 3;
Цвет обвоки спрайтов: colorSpriteArea = «green»;
Цвет обводки фона: colorCommonArea = «red»;
Размер квадрата точки контура/2: halfPoitSize = 5;
Gollage_n находится в стадии тестирования и разработки.
 ===========
 Источник:
habr.com
===========
Похожие новости: Теги для поиска: #_javascript, #_canvas, #_photography, #_img, #_canvas, #_javascript, #_javascript, #_canvas
Профиль  ЛС 
Показать сообщения:     
Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 22-Ноя 17:43
Часовой пояс: UTC + 5