Русский
Русский
English
Статистика
Реклама

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



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
К списку статей
Опубликовано: 25.08.2020 12:13:42
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Javascript

Canvas

Photography

Img

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru