Подписывайся на Telegram-канал

Обзор fabric.js или как я научился javascript

Обзор fabric.js или как я научился javascript

https://t.me/it_programmist

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

Правда в том, что у меня уже был опыт разработки сайтов и я был знаком javascript. Но, как и у большинства разработчиков сайтов, знание javascript ограничивалось работой с DOM и ajax через jQuery и некоторые простые манипуляции с чистым JS.

Чистого JS я даже какое-то время боялся, да и не нужен он мне был для сайтов, которые строились по одинаковому принципу.



Что же изменилось?

Появился заказ на сайт-конструктор фотоальбомов. То есть посетитель сайта в браузере загружает свои фотографии и собирает коллаж, который предполагалось распечатывать. Задача интересная, но для меня новая. Бросился искать готовые решения или примеры реализации и наткнулся на fabric.js. Это отечественная разработка. Ребята сделали себе магазин с конструктором принтов для футболок, а библиотеку выложили для всеобщего пользования. За что им и спасибо.



Вот тут и началось углубление в javascript, ибо jQuery тут не канал. Нет, его можно было бы прикрутить(хотя не уверен, что оно там надо), но я решил убить двух зайцев и подтянуть чистый JS.

Каждая отдельная страница альбома - это canvas. Canvas, я до этого момента тоже не использовал. Оказалось, всё не так страшно как казалось.

На canvas(холст по-русски) с помощью javasript добавляются объекты(в нашем простейшем случае фотки). В общем-то, библиотека fabric.js предоставляет удобный инструментарий для добавления, изменений и обработки событий объектов на canvas.



Мы говорим библиотеке "помоги с вот этим canvas'ом" вот так:



const canvasId = document.getElementById('canvas')
const canvas = new fabric.Canvas(canvasId)



И теперь, пользуясь методами библиотеки, мы без труда добавляем и манипулируем элементами на холсте.



Но у нас же грузятся фотки с компа посетителя.



Это отдельная история. Был написан нехилый бэкэнд на php под это дело. Можно сказать CMS и на ней даже работает пару сайтов, но это отдельная история(Если интересно пишите в https://t.me/progersclub - расскажу отдельно).

Если коротко, то создается запись в БД. И даже если посетитель не зарегался, но что-то наваял, то ему ставится cookie и, при следующем посещении сайта, его художества вытягиваются из базы.



С помощью рассматриваемой библиотеки было не сильно сложно прикрутить к нашему конструктору ресайз фоток и их редактирование аля простой инстаграм: яркость, контраст, наложение цвета и т.п. На сайте есть даже примеры фильтром, то есть если задаться целью, можно сделать свой инстаграм.



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



И это только то, что понадобилось именно мне. В fabric.js можно добавить на холст режим рисования. Да, можно сделать на сайте свой paint.

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

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

шаблон - фотки только на строго отведённых местах



У fabric.js исчерпывающее руководство и поэтому эта статья - обзор, а не мануал.



Не устану повторять, что научится чему-то можно только на практике. Теория это хорошо, но главное - это практические упражнения и, желательно, их повторения.

Вот таким образом, я подтянул JavaScript до такой степени, что мне стали не страшны ни NodeJs, ни реакт с ангуляром(хотя в реакт я со второго раза запрыгнул). Разобрался с canvas и понял, что это просто, интересно и даёт массу возможностей. И просто повысил уверенность в собственных силах.



Так что дерзай!



И подписывайся на Я - программист!, если ещё не подписан и приходи в наш уютный клуб.

Ещё