Comentario: Con el apoyo de las especificaciones HTML5, ha sido posible que WebApp tome fotos en teléfonos móviles. A continuación, explicaré cómo la aplicación web toma fotos con su teléfono móvil, las muestra en la página y las sube al servidor
1. Transmisión de video
HTML5 La API de captura de medios proporciona acceso programable a la cámara, y los usuarios pueden usar directamente GetUsermedia para obtener la transmisión de video proporcionada por la cámara. Lo que debemos hacer es agregar una etiqueta de video HTML5 y obtener el video de la cámara como fuente de entrada para esta etiqueta (tenga en cuenta que solo Chrome y Opera actualmente admiten GetUsermedia).
<videoidVideoid = videAutOplay = "> </video>
<script>
varvideo_element = document.getElementById ('video');
if (navigator.getusermedia) {// operashoulduseopera.getusermedianow
navigator.getusermedia ('video', éxito, error);
}
functionsuccess (stream) {
video_element.src = stream;
}
</script>
Transmisión de video
2. Tome fotos
Para la función de disparo de fotos, utilizamos el lienzo HTML5 para capturar el contenido de las etiquetas de video en tiempo real, y los elementos de video pueden usarse como entrada a las imágenes de lienzo, lo cual es excelente. El código principal es el siguiente:
Código JavaScript Copiar contenido al portapapeles
var lienvas = 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. Adquisición de imágenes
A continuación, queremos obtener datos de imagen del lienzo. La idea central es usar el lienzo 'Todataurl para convertir los datos de Canvas en las imágenes PNG codificadas Base64 bit, similar al formato de datos: Image/PNG; Base64, XXXXX.
var imgData = Canvas.todataurl (imagen/png);
Debido a que los datos de la imagen real son la parte después de la coma codificada base64, los datos de la imagen procesados por nuestro servidor real deberían ser esta parte, y podemos obtenerlo de dos maneras.
El primer tipo es interceptar cadenas de 22 bits como datos de imagen en el front-end, por ejemplo:
var data = imgdata.substr (22);
Si desea obtener el tamaño de la imagen antes de cargar, puede usar:
Var longitud = ATOB (datos) .length; // atobdecodesastringofdatawhichhasbeenencodusingbase-64coding
El segundo tipo es obtener los datos transmitidos en el backend e interceptar la cadena de 22 bits en el lenguaje de fondo. Por ejemplo, en PHP:
$ image = base64_decode (str_replace ('data: image/jpeg; base64,' ,, $ data);
4. Subir fotos
En la parte delantera, puede usar AJAX para cargar los datos de la imagen obtenidos anteriormente en el script de fondo. Por ejemplo, cuando se usa jQuery:
$ .post ('upload.php', {'data': data});
En el fondo, utilizamos scripts PHP para recibir datos y almacenarlos como imágenes.
functionConvert_data ($ data) {
$ image = base64_decode (str_replace ('data: image/jpeg; base64,' ,, $ data);
save_to_file ($ imagen);
}
functionsave_to_file ($ image) {
$ fp = fopen ($ nombre de archivo, 'w');
fwrite ($ fp, $ imagen);
fclose ($ fp);
}
Tenga en cuenta que la solución anterior no solo se puede utilizar para la carga de fotos de la aplicación web, sino que también puede convertir la salida de lienzo en carga de imagen. De esta manera, puede usar el lienzo para proporcionar a los usuarios la edición de imágenes, como el recorte, la coloración y las funciones de tablero de graffiti, y luego guardar las imágenes editadas del usuario en el servidor.