Как запихнуть фото с вебки пользователя в input[type="file"]?

Question

[NikitoZ Sc.]

Внимательно раскурил документацию по getUserMedia() и получению снимка с камеры пользователя в canvas. Остался один вопрос: как эту полученную фотку назначить "значением" для поля input?
Сейчас есть одна большая форма, с кучей полей, в том числе и прикреплением файлов. Все отправляется на сервер "кучей". Вот есть непреодолимое желание прикреплять файлы напрямую с вебки. Окно предпросмотра с потоком и получением снимка уже почти дописал. Тормозит только этот момент:(

Comments

[NikitoZ Sc.]

Хорошо.... А локально, на компе пользователя через JS мы можем это фото сохранить?

Answer 1

[Иван]

В input[type=file] ничего запихнуть не получится. Как вариант canvas.asDataURL и пересылать это значение в скрытом поле. В какой-то мере костыли, но ничего более быстрого на ум не приходит

Answer 2

[Илья Белобородов]

А зачем оно тебе input[type=file]?

Я бы сделал так.
Пользователь заходит на страницу, например, заполнения своего профиля, где кроме имени, даты рождения и тд нужно своткаться через вэбку.

Для этого, при входе на страницу нужно создать рамдомный идентификатор, сохранить его в сессию. После того, как пользователь сфотографировался, путь к фото записывается в бд вместе с этим идентификатором, который у него в сессии. Когда человек сохраняет анкету, (имя, фамилия, день рождения и тд), то вместе с анкетой сохраняем этот самый идентификатор, после сохранения анкеты, ищем фото по этому идентификатору и связываем его с анкетой

Comments

[NikitoZ Sc.]

Тут немного другая система, и проще в input фото запихнуть, чем переделывать форму для отправки "по частям". Это форма внесения документа, к которому можно приложить кучу сканов/фото.

[Илья Белобородов]

NikitoZ Sc.: Ну, тогда я хз))

[NikitoZ Sc.]

Илья Белобородов: Жаль:) Но за идею все равно спасибо:)

Answer 3

[Artem Zelenskiy]

Доброго времени суток. Верстаю страницу регистрации и возник аналогичный с Вашим вопрос. Можно узнать как Вы его решили?)

Comments

[NikitoZ Sc.]

Очень просто - картинки с камеры кладу в canvas, и перед отправкой формы запихиваю их в скрытое поле как base64, через canvas.toDataURL. В моем решении пользователю дается возможность сделать несколько фото сразу, так что скрипт заводит несколько полей формы. А на стороне сервера я уже проверяю, что из того, что пришло от формы, является файлом, и соответствующим образом обрабатываю

[Artem Zelenskiy]

NikitoZ Sc., Спасибо за ответ)