Загрузка картинки из вебкамеры на сервер
 

Подскажите пожалуйста, допустим я получил картинку с вебкамеры и она без проблем вставляется в документ с помощью кода

var data = canvas.toDataURL('image/jpeg');
document.getElementById('photo').setAttribute('src', data);

Как я могу ее загрузить на сервер? Тоесть с помощью метода jQuery $.post или самого объекта xmlhttprequest, не пойму как мне ее запихать в параметр и зааплоадить, сама картинка получается с помощью механизма getusermedia и canvas, с этим проблем нет.

У канвы ещё есть метод toBlob

Да, но как именно загрузить его на сервер? Чтобы в пост запросе он был именно файлом со всеми boundary и тд а не просто аргументом в post data.

Объект FormData() и его метод .append()

А можно пример того как в этот метод вставить именно файл из канваса?
append('pic', canvas.toDataURL(\'image/jpeg\'));
или append('pic', canvas.toBlob());
или как? Просто насколько я знаю браузер запрещает задавать значение элементу инпут тип=файл программно. Вобщем-то весь вопрос именно в том, как зааплоадить именно динамически созданный файл.

iNfantry,
почему ты так упрямствуешь в своем нежелании глянуть документацию по FormData?

а toBlob асинхронный, с колбеком. Тоже не мешало бы ознакомиться.

Не надо ничего создавать, добавите объекту пару ключ => значение.

Сперва нужно создать объект FormData(). Все о нем здесь.

В качестве "значение" подставлять урл или блоб?

А какой у canvas URL?

разумеется, блоб.

или, по твоему, упоминание тут метода toBlob - просто совпадение? :)

Собсна меня бы устроил простой ответ "append blob", это и пытался выяснить, спасибо)

iNfantry,
не забудь про третий параметр!

Забыл бы)

Я конешно извиняюсь, но что-то я не до конца разобрался.
TypeError: Argument 2 of FormData.append is not an object.
Это выдается если в аппенд передать canvas.toDataURL('image/jpeg') или canvas.toBlob(function(blob){}, 'image/jpeg', 0.95). Вопрос остается актуальным, как мне загрузить на сервер динамически созданное с помощью канвас фото, находящееся в атрибуте src тэга img? Как динамически загрузить его на сервер? Ну или хотябы как мне подставить значение из img src в элемент input type=file, это же поулчается обход политики безопасности браузера или я не прав?

Ха, всетаки разобрался, просто пост запрос надо делать в коллбаке toBlob(blob) где тот самый blob и добавляется в append, если кому-то это интересно)