Html5 FileApi Canvas
 

Здравствуйте!
Есть новостной сайт, ньюсмейкер добавляет новость соответственно изображение к ней. Вот об добавление изображения пойдет речь.
Процесс добавления изображение складывается следующим образом:
1. Загружаем изображение
1.1 Отправляет на сервер
1.2 С сервер приходит ссылка на изображение сжатое до 460px по ширине. Назовем его условно handleImage
2. Далее newsmaker делает crop handleImage с определенным коефициентом aspectRatio.
2.1 Отправляет данные на сервере
2.2 Сервер кропает по координатом отправляет ответ назовем это изображение normalImage
3. На normalImage ньюмейкер делает еще одно превью с определенным aspectRation
3.1 Отправляет данные на сервер
4. Процесс загрузки изображение завершен


Что хотелось бы? Хотелось бы чтобы это все происходило на клиенте без постоянного дергания сервера. Технологии HTML5 FileAPI FileReader Canvas.

Возможно ли создать n количество canvas буферов и туда складывать handleImage,normalImage,thumbImage. А потом canvas отправлять на сервер посредством FileAPI уже обработанные изображения?

Все решается с помощью canvas -> base64. Потом запихиваем в FormData base64 code и отправляем вместе с формой на сервер.

Зачем тут FormData? Достаточно base64 отправлять.