Графический редактор на LibCanvas


    Привет, Хабр! Хочу представить вам свеженькое приложеньице — графический редактор на HTML5, выполненный с помощью LibCanvas.


    HTML5-редактор



    Написан он полностью с нуля на базе LibCanvas. Изначально он рассчитывался просто как html5-альтернатива графити ВКонтакте, но в итоге получилось что-то более серьезное. Хотя все исходники открыты (вы их можете использовать под GPL v3 лицензией) если найдутся желающие поддержать проект развитием — можете мне написать и организуем нормальный репозитарий)

    Кратко про возможности:
    1. История undo-redo (глубина — до 128 переходов)
    2. Сохранение результата на сервер (та зеленая галочка вверху)
    3. Загрузка картинки по ссылке(но без особенностей, отлично грузить ранее созданные графити для редактирования, но картинка неподходящего размера покажется как получится)
    4. 216 цветов, регулирование размера и непрозрачности кисти
    5. Некоторые фильтры (их количество в будущем ограничено только фантазией). На данный момент: Инвертирование, Сдвиг по HSB, Обесцвечивание
    6. Разные кисти, возможность создавать новую кисть из черно-белой маски (требуется правка исходников), можно создавать динамическую маску (как кисть Sparks)
    7. Нормально видно пример выбранной кисти (а не как ВКонтакте)

    если будут желающие — могу как-то постараться написать о том, как такое сделать



    кстати, кому интересны альтернативные редакторы на html5: 1, 2

    Несколько интересных из 1100 хабрарисунков сделанных за вчера:




    Повторю на всяк случай:

    HTML5-редактор



    ps. LibCanvas будет принимать участие в конкурсе GTUG, 26 октября в Питере, но я не смогу приехать, нужен человек, который представит его вместо меня, желающих приглашаю в личку или в джаббер (есть в профиле) или в мыло shocksilien@gmail.com
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 59

      +6
      Шайтан машина. Удачи автору на конкурсе!
        0
        >> 2. Сохранение результата на сервер (та зеленая галочка вверху)

        Для браузеров, поддерживающих localStorage, можно сохранение в него сделать, заодно не помешал бы экспорт в виде data uri как в Artist's Sketchbook: widgets.opera.com/widget/4647/ чтоб можно было сохранить в виде локального файла.
          +5
          В планах, даже частично реализовано. на самом деле еще много чего можно реализовать. все зависит только от уделенного времени

          ps. Кому интересно, в сети есть готовый класс для сохранения в разных форматах, на комп и просто показать картинку: www.nihilogic.dk/labs/canvas2image/
          Хотя, как на меня, он — избыточен. png — достаточно вполне
          +2
          Думаю в ближайшем будущем будет аналог фотошопа на HTML написан ;)
            –1
            Не будет.
              0
              И будет работать точно живее, чем на flash. Уже быстрее. Нравится.
                +1
                имелось в виду, HTML5 быстрее, чем flash.
              +2
              При измененном opacity полное удаление не работает. :)
                +2
                fixed
                +1
                Писал зимой распознавалку циферок (да-да, банальная задача). К дельфям/шарпам после рельс притрагиваться не хотелось, в итоге эта задача вырасла в мой первый javascript с использованием libcanvas (ч/б редактором с выбором диаметра кисти).
                Выкладывать на всеобщее обозрение жуть как стыдно. Хотя если в божеский вид привести и код оптимизировать, то интересное из этого может что-то выйти.
                  0
                  зимой libcanvas? первый прототип выложен в сеть только весной)
                  скиньте в личку, пожалуйста, интересно посмотреть)
                    0
                    Да, возможно частично память подводит.
                  –4
                  Такие рафические редакторы на флеше уже 10 лет как делают, а современные аналоги уже к фотошопу близки (http://habrahabr.ru/blogs/web_2_0/41888/). Вы молодец, конечно, что новую технологию изучаете. А конкретно эта разработка — сомнительное достижение среди графических редакторов.
                    +11
                    Такие графические редакторы, как на флеше уже 20 лет на Си делают, а современные аналоги флешу даже не снились. Вы, конечно, молодец, что про новую технологию мне рассказываете, но я знаю и про флеш и про си и про все остальное
                      –3
                      20 лет назад на Си делали браузерные приложения? я как-то упустил этот момент!
                      ХТМЛ5 противопоставляется именно флешу и прочим браузерным технологиям, а не десктопным технологиям. и нечего сравнивать эти игры в песочнице со всей историей технологий.
                        +1
                        ну, в первом сообщении вы сами сравнили с фотошопом, вас за язык никто не тянул.
                        10 лет назад в браузере без плагина можно было такое сделать?
                        а с плагином и Фотошоп можно запустить в браузере. Квейк Лив вон запустили же.
                        я никого ни с чем не сравниваю. это вы тут кому-то хотите доказать, что уходящий флеш — крут. Не во флеше дело.
                        если вы не понимаете в чем ценность подобных проектов — вы плохо следите за рынком веб разработки и вам тут скоро делать будет нечего.
                        и да, это приложение на самом деле больше просто демонстрация возможностей LibCanvas. По крайней мере изначально оно задумывалось именно так.
                        • НЛО прилетело и опубликовало эту надпись здесь
                            0
                            ну я про сроки не говорил)
                            но Адоб активно готовит инструментарий для разработки на html5, а это значит, что создатели Флеша чуют, куда дует ветер.
                            есть еще ниша Гугл Аппсов.
                            про айфоны-айпады знаю, видел на конференции у товарища недавно, это действительно так. но, на самом деле, надо просто поработать дома с примерами. эксперименты показали, что потенциал есть.
                            • НЛО прилетело и опубликовало эту надпись здесь
                                +1
                                ru.wikipedia.org/wiki/Графический_редактор
                                Растровый графический редактор — специализированная программа, предназначенная для создания и обработки изображений.

                                На вышеуказанной программе можно создавать и редактировать изображения. Между прочим, даже обычный пейнт является графическим редактором, хотя в нем слоёв нету. Слои — это не показатель графического редактора.

                                Вот если бы я кричал про аналог фотошопа, или про то, что это убийца всех редакторов на флеше — тут да, это было бы некорректно. Но пока я не сказал ничего не соответствующего действительности.
                              +2
                              на айфоне сафари вылетает нахрен при заходе на главную сайта.
                                +2
                                кстати сама рисовалка на айфоне работает, провда кроме точек ничего ставить не получается — страничка скролится. но все функции работают как надо.
                                0
                                С фотошопом я сравнивал по функциональности, а не по технологии реализации. Вторым аргументом как раз вы попытались воспользоваться. А за технологиями я слежу, работа моя такая.

                                Я сказать хочу только одно: нечего восторгаться новой технологией только за то, что она новая, хоть и немощная. Покажите примеры ее использования, которые утрут нос всем аналогам, бывшим до нее — вот это будет достойно. Пока примеры совсем не впечатляют.
                                  0
                                  в 1769 военным инженером была изобретена Телега Кюньо — первый экземпляр автомобиля, который он предлагал использовать в качестве замены лошадям для транспортировки пушек. к сожалению, экземпляр был далеко несовершенен: маленькая скорость, неудобное управление, часто ламался, потому военные отказались от него в пользу быстрых, привычных и проверенных временем лошадей.
                                    +1
                                    И правы были военные! Если бы они предпочли тарантасы только потому, что это новинка, по сравнению с лошадьми, они бы проигрывали сражения.
                                    А критической оценкой они мотивировали конструкторов делать хорошие автомобили, превосходящие лошадей в военном деле. Как видим, сейчас кавалерии практически нет в современных армиях.
                                      +1
                                      Вот и Флеша не будет) На все нужно время, я сомневаюсь, что на практике этот редактор будет использоваться на каком-нибудь высокопосещаемом сайте, хотя по функциональности он превосходит редактор, например, редактор Вконтакте.
                                      Более того, я и не утверждал, что это особо крутой редактор, или что всем надо им восторгаться. я выложил его, дал объективную информацию, а каждый желающий сам может его оценить.
                                +1
                                Если внимательно изучить тему — то в данном топике автор хвастается не редактором, а фреймворком — на котором он смог без труда сделать редактор, уровнем догоняющий flash аналоги.
                                • НЛО прилетело и опубликовало эту надпись здесь
                                    –2
                                    А, то есть фреймворк суперкрутой, а редактор слабенький? Так и надо было ради хвастовства показывать примеры, раскрывающие всю прелесть фреймворка, мы бы впечатлились.
                                      0
                                        +1
                                        вы предлагаете в качестве демонстрации своего фреймворка написать аналог приложения, которое разрабатывают команды программистов за большие деньги?

                                        то есть фреймвойк на php в качестве демонстрации должен предоставлять сайты с посещаемостью не меньше 100 000 уникальных в сутки, а фреймворки на мастер, который изготовляет рубанки — мебельные шедевры?

                                        если я потрачу полгода на редактор — я сделаю хороший редактор, но фреймворк придет в запустение.
                                          0
                                          Говорить, что я требую крутых примеров, это слишком грубо.
                                          Все просто!
                                          Если вы хотите нам показать преимущества, надо показывать преимущества.
                                            0
                                            преимущество — OpenSource
                                              0
                                              вас впечатляют примеры на этой странице?
                                          +2
                                          вы видели ексемплы jQuery?
                                    +3
                                    Такие графические редакторы я на ZX Spectrum использовал в своем глубоком детстве, а вот исследование новых фреймворков — это великое дело. От паинта до фотошопа один шаг ;)
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                      +1
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                          +2
                                          круто! можно использовать как shared sketchpad! не в реальном времени, правда, но можно
                                            +4
                                            Блин, сколько занудства по отношению к такой классной работе. Ведь из названия же ясно, что прелесть не в том что это, а на чём, полезный развивающий фан.
                                              –4
                                              Вот это опасное убеждение для технологического прогресса, да и для личного развития.
                                                +1
                                                Какая-нибудь аргументация?)
                                              +1
                                              Предлагаю написать такой же редактор, но с использованием статического html и php. Вот это будет шедевр!
                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                –1
                                                Это всё конечно хорошо, но ваша ошибка в том, что вы разрабатываете этот фреймворк на костылях (не помню как там называется этот фреймворк MeeTools кажется? что-то похожее...). Уже говорили, что все эти надстройки над Javascript были созданы теми, кто не понял Javascript и прототипы.

                                                Когда я выбирал библиотеку для разработки игры мне пришлось отказаться от вашей библиотеки. Банально Eclipse (сборка для Javascript разработчика) просто не понимает все эти нестандартные надстройки (фреймворки) из-за чего очень сложно ориентироваться в коде как вашего фреймворка, так и игры, которую я буду делать.

                                                Делали бы вы просто на синтаксисе Javascript без всяких новомодных фреймворков. Уже как минимум одна неплохая игра у вас бы была в портфолио библиотеки. А так сейчас буду собственный велосипед изобретать, т.к. нормальных библиотек так и не нашел.
                                                  0
                                                  Вы конечно можно рассказать о более понятном и удобном синтаксисе и прочее, прочее (я читал самые первые ваши посты по LibCanvas). Но в итоге ваша библиотека угаснет. Потому что большинство игр (HTML5), которые я смотрел (изучал исходники) используют стандартный Javascript синтаксис без всяких надстроек типа MooTools и подобных.
                                                    0
                                                    Смотрите в сторону google closure — вот это я думаю наиболее оптимальное решение. Разработанные на нём программы и игры будет затем значительно проще портировать на следующую версию Ecmascript, где обещают пространства имён и многие другие полезности. А как вот будет со всякми MooTools очень большой вопрос…
                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                        +1
                                                        Уже говорили, что все эти надстройки над Javascript были созданы теми, кто не понял Javascript и прототипы.
                                                        Это говорили те, кто не понял Javascript и прототипы.
                                                        Но спасибо за ваше мнение. Раз вы читали предыдущие топики — повторяться не буду)
                                                        0
                                                        Конечно и ваш фреймворк найдёт свою аудиторию, но популярным станет тот фреймворк, который будет использовать прототипы и стандартный синтаксис javascript. Может кто-то сейчас думает создать новый фреймворк для игр и мои пожелания помогут выбрать верный путь :)
                                                          0
                                                            +2
                                                            игры еще нет, а она уже неплохая! сказал как отрезал, и зачем только все эти фреймворки придумали? вот я, вместе с прототипами и стандартным синтаксисом, а вы все угасните пацаны; такова она правда матка…
                                                              0
                                                              http://5iton.com/ не работает. Где-нибудь есть ещё выложенный?
                                                                0
                                                                Да. Сломали как-то и всё не могу поднять. Есть вот версия:
                                                                libcanvas.github.com/archive/5iton/
                                                                  0
                                                                  Спасибо. А на странице libcanvas.github.com нет ссылки, там я первым делом искал, когда хотел найти этот редактор.
                                                                  P.S. Спасибо за классную библиотеку :) Думаю её использовать в своём проекте…
                                                                    0
                                                                    Он на очень старой версии просто)
                                                                    Напиши перед использованием мне в скайп — shock13666, надо кое-что рассказать)
                                                                      0
                                                                      Ну т.е. хорошее рассказать, а не расстроить)

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

                                                              Самое читаемое