Блог о современных технологиях в интернете

Zend Framework, Ruby on Rails, Cocoa, xUnit, Git, REST, JavaScript, HTML5, CSS3, Mac OS X

February 6, 2010 at 1:59am
Метки: html5 fileapi drag and drop xmlhttprequest offline

Редактирование изображения в офлайне и последующая загрузка с помощью HTML5

Мы с вами уже научились загружать файлы с помощью File API, Drag & Drop и XMLHttpRequest. Теперь мы можем развить тему применения новых технологий и рассмотрим возможность редактирования изображения еще до закачки на сервер. Для этого нам понадобятся следующие особенности HTML5.

  • Drag & Drop: для переноса локального изображения на сайт для редактирования и закачки.
  • localStorage: для сохранения локального изображения, которое еще не загружено на сайт. Это необходимо чтобы избежать исчезновение изображения при перезагрузки страницы.
  • Application Cache: для загрузки редактора изображений даже когда сайт находится в офлайне.
  • Canvas: для редактирование изображения.

Работающий пример, можете попробовать все сами. 100% работоспособность в Firefox 3.6.

Демонстрация.

Оригинальная статья на Mozilla Hacks (на английском).

Комментировать