войти зарегистрироваться

Веб 3.0 whois

индекс
0,00

Графический редактор на HTML5 + JS

Недавно на просторах интернета был найден графический редактор, причем написанный чисто на HTML5 + JS без Flash и прочего
image

Данный редактор представляет стандартные возможности
Добавление текста
Градиентная заливка
Обычная заливка
Штамп
Кисть
Рисования различных форм (Shape)
Обрезание
И даже сохранение
Причем файл для сохранения выдаеться не прямой ссылкой с в виде DATA URI т.е изображение закодировано в адресе его и не сохранено на сервере не в процесе обработки не при выдачи пользователю
image
Редактор располагается тут mugtug.com/sketchpad/
+65
9 февраля 2010, 21:50
shifttstas

комментарии (66)

  • Оболдеть, меня все удивляют возможности HTML5. Только, наверное, самое главное сейчас — реализовать полную поддержку языка во всех браузерах.
    • Chrome и Safari поддерживают Firefox с каждым билдом улучшает поддержку, а остальные подтянуться
      • Opera 10.5 — также всё работает
      • С первого раза прочитал как «Chrome и Safari поддерживают Firefox»… дочитав переосмыслил.
        • Аналогично :) Отсутствие запятой усложнило восприятие смысла :)
    • «ОбОлдеть» — не то слово!)
      • видимо от слова bold: ))
        • (Предполагая, что он перепутал букву),
          может от русского слова «болт», т.е. тупой как болт. :)
    • Да это все круто, только пока не представляю даже насколько геморно все это писать. На канвасе окошки вручную и т.д. Вот если сделают нормальный фреймворк для этого, можно будет уже использовать, а пока, насколько флешь я и не люблю, для в большинстве подобных задач мне от него не уйти. Страшно как-то)
      • Так окошки там не на canvas же попиксельно отрисовываются :) Обычные div-ы
        Это вот во flash их надо делать на том же на чём и холст
        • Ну про окошки это я так, до кучи)) Есть ведь реализации и полностью на канвасе (тот же мозиловский ide)
    • Думаю, здесь гораздо больше заслуг у JS, чем у HTML5 :)
  • >>причем написанный чисто на HTML5
    амм, как то громко сказано на чистом HTML5
    там же JS
    • Ну имелось ввиду без Flash и Silverlight
      • Дык допишите в топик. А то ведь не все заглядывают в исходники )))
        • Ну понимаете допустим реализация тега Video а точнее управление громкостью и прочим делаеться через JS по вашему это тоже важно?
          Суть топика такова что HTML5 может потягаться в замене Flash )
          • Он не на HTML 5 написан!
            На HTML 5 + Javascript, при чем такой-же редактор можно сделать и без HTML 5, а главная роль тут у джаваскрипта.
            • главная роль вообщето CANVAS )
              • Не меньше канваса там используется SVG, а самое главное то, что управляется все джаваскриптом.
                • Абсолютно согласен. Нужно писать «Графический редактор на Javascript + HTML5»
          • Да я ведь не против. Но заголовок звучит некорректно.

            Это как если бы я написал статью «купить Мерседес, сдав бутылки», а в комментариях объяснял, что дополнительно брал ипотеку, зато не надо грабить банк )))
          • Начнут на нем игры писать, так чтоб в отдельном браузере не считерить было — я начну подумывать о том что хтмл5 может заменить флеш
            • HTML 5 заменит флэш, когда .bat-файлы смогут заменить C++ :) Одно дело видео вставить без флэша и совсем другое — сделать, к примеру, игру.
              • На JS пишется интерпретатор + подгружается исполняемый код.

                Прототипами подобной схемы являются эмуляторы NES на JS.
  • Ну смешно даже, там больше 6000 тыщ строк JS-кода.
    Таких редакторов хватает, меняйте срочно заголовок вашей статьи!
    • Да? хоть 1 покажите
      • canvaspaint.org/ Не такой красивый но вполне функциональный.
        • Хм ну его не видел, просто наткнулся на данный редактор и тут есть много интересных функций ну или в крайнем случае пишите 2 статью про этот редактор но он как то больно на Paint смахивает )) и вызывает отвращение
        • брр… увидел Paint. меня аж передергнуло…
        • Функциональный?
            
          Chrome.
      • www.pixlr.com
        • На флэше
          • раскрыть комментарий
          • Ну и что, что на флеше? Зато функциональный! Можно редактировать изображения, работать со слоями, открывать .PSD файлы (!), и сохранять исходники в собстенный формат .pxd. В наличии большинство часто-используемых инструментов Photoshop.

            Я в офисе всех редакторов подсадил на эту штуковину — просто и эффективно :)
            • открывать то открывает, удобный без спорно, но та-же история как и с гимпом, не видит он маски(эффекты) слоев, которые созданные в фотошопе, оно и понятно почему)
  • Дабы закончить перепалки, добавил в статью что JS
    • enl
    • enl
    • 9 февраля 2010, 22:57
    • #
      • +1
    Отличный редактор! А на C/C++ строчек кода будет не меньше.
  • теперь я действительно удостоверился в том, что на JS можно делать практически любые вещи. ставлю 5+!
    • Xpeh
    • Xpeh
    • 9 февраля 2010, 23:10
    • #
      • –1
    widgets.opera.com/widget/4647/ — Artist's Sketchbook ИМХО круче.
  • Поразила скорость работы. Помнится аналогичный на флэше заметно подтормаживал.
    • www.pixlr.com заметно подтомаживает, а мой ноутбук начинает взлет, только что проверял. Он, конечно, немного сложнее, слои поддерживает, поэтому сравнение может быть необъективным.
  • Пора создать блог Веб 3.0 :)
  • Классная штукенция! Не ожидал, что такое можно в браузере вытворять.
    Кстати, так и не понял, каким образом генерируется base64 для data/uri
    • document.getElementById('canvas').toDataURL() — вот и base64. Или вас что-то другое интересовало?
      • Да, именно об этом я и спрашивал. Спасибо
  • Ого! Кисть с градиентом — такого даже в Фотошопе нету!
    • раскрыть комментарий
      • Заминусуйте, чтоб не разрывало…
    • DeMx
    • DeMx
    • 9 февраля 2010, 23:42
    • #
      • –7
    раскрыть комментарий
    • IE6 уже как мамонт… если остался, то у единиц…
      и до данного редактора его обладатели вряд ли доберутся… =)
      • сорказм…
      • Хорошо, перефразируем коммент. :)
        В IE6/7/8 НЕ РАБОТАЕТ!!!11

        Боюсь, для столь сложного приложения excanvas не поможет.
    • маленький гемор для человека, но большой скачок для человечества ^_^
    • да вы что? не может быть!
  • О Боже! Какая безграмотность!
    • У автора клавиши со знаками препинания западают, очевидно. Одна точка и одна запятая на весь пост.
  • Раз уж используют канвас, могли бы уже и слои добавить.
    А так выглядит няшненько.
  • Когда читал(но еще не дошел до сохранения), тоже думал как бы сохранить этот рисунок, первая мысль была закодировать в самом url… самое интересное что так и сделали :)))
  • Да всегда не обращал внимания на эти штуки, но сейчас попробовал и создал закладку WEBApp и добавил туда сабж и всё что было в комментариях. :)
  • Даешь Pixlr без флэша!
  • хабраэффект?
  • После использования инструмента «Text» у меня ни один другой не работает. Как в Chrome, так и в Firefox. Кто-нибудь что-нибудь знает?)
  • «Причем файл для сохранения выдаеться не прямой ссылкой с в виде DATA URI т.е изображение закодировано в адресе его и не сохранено на сервере не в процесе обработки не при выдачи пользователю»

    Как можно быть таким безграмотным? Вам самому понятно, что вы написали? До меня раза с 10 только дошло, что вы хотели сказать.
  • Я долго ждал достойного :) но это сырая версия для полноценного перехода с Photoshop ещё не готова ) а так бы с радостью

    и не хватает поддержку горячих клавиш! :) ну а язык, мне кажется анг. хватит? :))

  • Открыл код, а там сплошной javascript. И че радоваться?
Только авторизованные пользователи могут оставлять комментарии. Авторизуйтесь, пожалуйста.