[JavaScript, Canvas] Collage_n небольшой онлайн редактор, для создания коллажей и цветовых эффектов с открытым исходным кодом — javascript
Автор
Сообщение
news_bot ®
Стаж: 6 лет 8 месяцев
Сообщений: 27286
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
===========
Похожие новости:
- [Python, JavaScript, Java, Swift, Изучение языков] 7 Ultimate Programming languages For Mobile App Development
- [Разработка веб-сайтов, Open source, JavaScript, GitHub, VueJS] Создание библиотеки из VUE компонента и публикация на NPM
- [Разработка веб-сайтов, JavaScript] Web Push и Vue.js, еще раз о работе с веб-пуш сообщениями на фронтенде
- [Разработка веб-сайтов, JavaScript, Тестирование веб-сервисов] Эффективное тестирование верстки
- [Разработка веб-сайтов] [HTML, CSS, JavaScript] Знакомство с Rome — компилятор, сборщик, линтер, тесты в одном флаконе
- [Алгоритмы, Node.JS, API, Финансы в IT] Поиски фундаментальных данных для акций через API Financial Modeling Prep
- [API, JavaScript, Финансы в IT] Отслеживаем состояние своего портфеля у брокера «Тинькофф Инвестиции» через Google Таблицы
- [Высокая производительность, JavaScript, Алгоритмы] Нативный — не значит быстрый. Обгоняем map, filter и reduce на больших массивах
- [Информационная безопасность, Разработка веб-сайтов, JavaScript] Как npm обеспечивает безопасность
- [Работа с 3D-графикой, Дизайн, Умный дом, Интернет вещей, DIY или Сделай сам] Электронные часы в духе Cronixie
Теги для поиска: #_javascript, #_canvas, #_photography, #_img, #_canvas, #_javascript, #_javascript, #_canvas
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 01-Ноя 07:38
Часовой пояс: UTC + 5
Автор | Сообщение |
---|---|
news_bot ®
Стаж: 6 лет 8 месяцев |
|
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 =========== Похожие новости:
|
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 01-Ноя 07:38
Часовой пояс: UTC + 5