Cómo utilizar un objeto HTML para permitir que la cámara tome fotografías en línea

La tecnología HTML5 admite WebApp para tomar fotografías en teléfonos móviles, mostrarlas en la página y subirlas al servidor. Esta es una característica común en las aplicaciones móviles de Weibo. Por supuesto, también puedes utilizar esta tecnología de forma adecuada en otro tipo de aplicaciones.

1. Transmisión de video

La API de captura de medios de HTML5 proporciona acceso programable a la cámara. Los usuarios pueden usar getUserMedia directamente (tenga en cuenta que actualmente solo se admiten Chrome y Opera) para obtener el contenido. secuencia de vídeo proporcionada por la cámara. Lo que debemos hacer es agregar una etiqueta de video HTML5 y usar el video obtenido de la cámara como fuente de entrada para esta etiqueta.

lt;video id="video" autoplay=""gt;lt;/videogt;

lt;scriptgt;

var video_element=document.getElementById ('video');

if(navigator.getUserMedia){ // opera debería usar opera.getUserMedianow

navigator.getUserMedia('video', éxito, error); El éxito es una función de devolución de llamada. Por supuesto, también puede escribir una función anónima directamente aquí

}

función éxito(stream){

video_element.src=. stream;

}

lt;/scriptgt;

En este momento, la transmisión de video dinámica de la cámara se mostrará en la etiqueta de video. A continuación, debes tomar fotografías.

2. Tomar fotografías

Para tomar fotografías se utiliza la función Canvas de HTML5 para capturar el contenido de la etiqueta Video en tiempo real porque el elemento Video se puede usar como entrada de la etiqueta. Imagen de lienzo, esto es fácil de implementar. El código principal es el siguiente:

var canvas=document.createElement('canvas'); //Crea dinámicamente un objeto de lienzo

var ctx=canvas.getContext('2d' );

var cw=vw, ch=vh;

ctx.fillStyle=”#ffffff”;

ctx.fillRect(0,0 ,cw,ch);

ctx.drawImage(video_element, 0, 0, cw, ch, 0, 0, vw, vh); //Captura y dibuja el área especificada en el objeto de video en área especificada en el lienzo, que puede ser Dibujo de tamaños y escalas desiguales.

document.body.append(canvas);

3. Adquisición de imágenes

La idea central de obtener datos de imágenes de Canvas es utilizar toDataURL de Canvas. a Los datos se convierten en una imagen PNG codificada en base64 bits, similar al formato de "data:image/png;base64,xxxxx".

var imgData=canvas.toDataURL("image/png");

De esta manera, la variable imgData almacena una larga cadena de contenido de datos de caracteres, que representa una imagen PNG. Codificación base64.

Debido a que los datos de la imagen real son la parte después de la coma codificada en base64, los datos de la imagen que debe recibir el servidor real deben ser esta parte. Podemos obtenerlos de dos maneras.

El primer método consiste en interceptar la cadena después de 22 bits en el extremo frontal como datos de imagen, por ejemplo:

var data=imgData.substr(22);

Si desea obtener el tamaño de la imagen antes de cargarla, puede usar:

var length=atob(data).length; //atob puede decodificar cadenas decodificadas en base 64

El segundo tipo: después de obtener los datos transmitidos en el backend, use el lenguaje de fondo para interceptar la cadena después de 22 dígitos (es decir, omita el paso anterior y cárguelo directamente en el frontend). Por ejemplo, en PHP:

$image=base64_decode(str_replace('data:image/jpeg;base64,',",$data);

4. Subir imagen

En la interfaz, puede usar Ajax para cargar los datos de la imagen obtenidos anteriormente en el script de fondo. Por ejemplo, cuando usa jQuery, puede usar:

$.post('upload. .php', {'data': data}.

En segundo plano utilizamos un script PHP para recibir los datos y almacenarlos como una imagen

función convert_data(. $datos){

$image=base64_decode(str_replace(). 'datos:image/jpeg;base64,',",$datos);

save_to_file($image);

}

función save_to_file($image ){

$fp=fopen($filename,'w');

fwrite ($fp, $imagen);

fclose($fp) ;

}