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

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

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

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

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

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

Что ещё почитать?

← Только те, кто предпринимает абсурдСамый мощный элемент в рекламе — пр →