Cómo usar html5 para implementar la función de tomar fotografías y cargarlas con la cámara
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' );
p>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,$image);
fclose($fp) ;
}
Las soluciones anteriores no solo se pueden utilizar para cargar fotografías en aplicaciones web, pero también proporciona edición de imágenes a través de las funciones de edición de Canvas, como recortar, colorear, graffiti y círculos, y luego cargar y guardar las imágenes editadas por el usuario en el servidor. HTML5, que aún se está complementando y revisando, la distancia entre las aplicaciones web y las aplicaciones nativas será cada vez más pequeña. En un futuro próximo, seguramente más y más proyectos de desarrollo nuevos y antiguos migrarán a aplicaciones WEB. p>Especificaciones relacionadas:
(Para facilitar la lectura. , se ha modificado adecuadamente el texto original sin perder el significado original, incluyendo la repetición de algunos errores en el código, y se han realizado comentarios)
La tecnología HTML5 admite WebApp para tomar fotografías en el teléfono móvil, mostrarlas en la página y cargarlas en el servidor. Esta es una función común en las aplicaciones móviles de Weibo. Por supuesto, también puede utilizar esta tecnología de manera adecuada. otros tipos de aplicaciones
1. Transmisión de video
La API Media Capture de HTML5. Capture proporciona acceso programable a la cámara. Los usuarios pueden usar getUserMedia directamente (tenga en cuenta que es). Actualmente solo es compatible con Chrome y Opera) para obtener la transmisión de video proporcionada por la cámara. Lo que debemos hacer es agregar una etiqueta de video HTML5 y transferirla desde la cámara. El video obtenido sirve 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' );
p>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 "datos:imagen/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 es 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,$image);
fclose($fp) ;
}
Las soluciones anteriores no solo se pueden utilizar para cargar fotografías en aplicaciones web, pero también proporciona edición de imágenes a través de las funciones de edición de Canvas, como recortar, colorear, graffiti y círculos, y luego cargar y guardar las imágenes editadas por el usuario en el servidor. HTML5, que aún se está complementando y revisando, la distancia entre las aplicaciones web y las aplicaciones nativas será cada vez más pequeña. En un futuro próximo, cada vez más proyectos de desarrollo nuevos y antiguos se migrarán a aplicaciones WEB.