Комментарий: При поддержке спецификаций HTML5 стало возможным сфотографировать мобильные телефоны. Ниже я объясню, как веб -приложение делает фотографии с мобильным телефоном, отображает их на странице и загружает их на сервер
1. Потоковое видео
HTML5 API API Capture Media предоставляет программируемый доступ к камере, и пользователи могут напрямую использовать GetUsermedia для получения видеопотока, предоставленного камерой. Что нам нужно сделать, так это добавить видео тег HTML5 и получить видео из камеры в качестве источника ввода для этого тега (обратите внимание, что только Chrome и Opera в настоящее время поддерживают GetUsermedia).
<VideoidVideoid = videoAutoplay = "> </video>
<Скрипт>
varvideo_element = document.getElementByid ('video');
if (navigator.getusermedia) {// operashoulduseopera.getusermedianow
navigator.getusermedia ('видео', успех, ошибка);
}
functionSuccess (Stream) {
video_element.src = stream;
}
</script>
Потоковое видео
2. Сделайте фотографии
Для функции съемки фотографий мы используем холст HTML5 для захвата содержания видеотеги в режиме реального времени, а элементы видео могут использоваться в качестве входных данных для изображений Canvas, что великолепно. Основной код заключается в следующем:
JavaScript Code Copy Content в буфер обмена
var canvas = document.createElement ('canvas');
var ctx = canvas.getContext ('2d');
var cw = vw;
var ch = vh;
ctx.fillstyle =#ffffff;
ctx.fillrect (0,0, CW, Ch);
ctx.drawimage (video_element, 0,0, VVW, VVH, 0,0, VW, VH);
document.body.append (Canvas);
3. Приобретение картин
Далее мы хотим получить данные изображения с холста. Основная идея состоит в том, чтобы использовать Canvas 'Todataurl для преобразования данных Canvas в Base64-битные изображения PNG, аналогичные формату данных: Image/PNG; Base64, XXXXX.
var imgdata = canvas.todataurl (image/png);
Поскольку реальные данные изображения являются частью после кодированной запятой BASE64, данные изображения, обработанные нашим фактическим сервером, должны быть этой частью, и мы можем получить его двумя способами.
Первый тип-перехват 22-разрядные строки в качестве данных изображения на передней части, например:
VAR DATA = IMGDATA.Substr (22);
Если вы хотите получить размер изображения перед загрузкой, вы можете использовать:
var length = atob (data) .length; // atobdecodesastringofdatawhichhasbeenencodedusingbase-64encoding
Второй тип состоит в том, чтобы получить передаваемые данные на бэкэнде и перехватить 22-разрядную строку на фоновом языке. Например, в PHP:
$ image = base64_decode (str_replace ('data: image/jpeg; base64,' ,, $ data);
4. Загрузите изображения
На передней части вы можете использовать AJAX для загрузки данных изображения, полученных выше, в фоновый скрипт. Например, при использовании jQuery:
$ .post ('upload.php', {'data': data});
В фоновом режиме мы используем сценарии PHP для получения данных и хранят их в качестве изображений.
functionConvert_data ($ data) {
$ image = base64_decode (str_replace ('data: image/jpeg; base64,' ,, $ data);
save_to_file ($ image);
}
functionSave_to_file ($ image) {
$ fp = fopen ($ filename, 'w');
fwrite ($ fp, $ image);
Fclose ($ fp);
}
Обратите внимание, что приведенное выше решение может быть использовано не только для загрузки фотографий веб -приложения, но и вы можете преобразовать вывод Canvas в загрузку изображения. Таким образом, вы можете использовать Canvas, чтобы предоставить пользователям редактирование изображений, такие как обрезка, раскраска и граффити -артборд, а затем сохранять отредактированные изображения пользователя на сервере.