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

Node.js, MongoDB, CoffeeScript, JavaScript, HTML5, CSS3, Zend Framework, PHP, Git, Social, Analytics

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

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

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

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

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

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

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

Заметки

  1. simonenko это опубликовал(а)