Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JQuery » Camara web - Guardar Imagen

JQuery - Camara web - Guardar Imagen

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Daniel

Camara web - Guardar Imagen

Publicado por Daniel (4 intervenciones) el 23/04/2014 05:47:41
Tengo este codigo y necesito guardar lo del canvas en una imagen.png o jpg lo echo asi y no me funciona alguien que sepa y me ayude.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var canvas = $('#canvas');
	
='editor_indent'>	
var cxt = canvas[0].getContext('2d');
		var video = $('#video');
		var video = video[0];
 
 
		if(navigator.getUserMedia){
			navigator.getUserMedia({
				'video': true },
				function(stream){
					video.src = stream;
					video.play();
				});
		}else if(navigator.webkitGetUserMedia){
			navigator.webkitGetUserMedia({
				'video': true },
				function(stream){
					video.src = window.webkitURL.createObjectURL(stream);
					video.play();
				});
		}else if(navigator.mozGetUserMedia){
			navigator.mozGetUserMedia({
				'video': true },
				function(stream){
					video.mozSrcObject = stream;
					video.play();
				},
				function(err){
					alert('An error occured! '+err);
				});
		}
 
		$("#tomarFoto").click(function(e){
 
			cxt.drawImage(video, 0, 0, 665, 500);
 
			var img = new Image();
			img.src = canvas.toDataURL();
			alert(img.src);
		});
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Camara web - Guardar Imagen

Publicado por aquiles (9 intervenciones) el 28/04/2014 22:12:20
Hola amigo estuve mirando algunos ejemplos porque me parece muy interesante y pude lograr hacer que funcione.

Para enviar al servidor necesitas hacerlo con ajax.

HTML: El boton de enviar.
1
2
3
<button id="enviar">
			Enviar Foto!
		</button>

JAVASCRIPT: El ajax.
1
2
3
4
5
6
7
8
9
10
11
$("#enviar").click(function() {
					var data = canvas.toDataURL("image/jpeg");
					$.ajax({
						type : "POST",
						url : "/guardar_foto",
						data :data,
						success : function(result){
							console.log("result:", result);
						}
					});
				});


Y para poder continuar.
Que lenguaje utilizas en el lado del servidor? (En mi caso python)

...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Daniel

Camara web - Guardar Imagen

Publicado por Daniel (4 intervenciones) el 29/04/2014 01:58:54
Amigo no entiendo muy bien si me enviaras el ejemplo el lenguaje que uso es Php.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 302
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Camara web - Guardar Imagen

Publicado por xve (673 intervenciones) el 29/04/2014 08:44:22
Hola Daniel, es javascript, igual que el código que tu has mostrado!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Camara web - Guardar Imagen

Publicado por aquiles (9 intervenciones) el 29/04/2014 23:18:49
Este es el html:

webcam.html:

Para probar ajustar el jquery
<script src="/js/jquery.js" type="text/javascript"></script>.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
	<head>
		<!-- ajustar el jquery -->
		<title>WEBCAM</title>
		<script src="/js/jquery.js" type="text/javascript"></script>
	</head>
	<body>
		<button id="foto">
			Tomar Foto!
		</button>
		<button id="enviar">
			Enviar Foto!
		</button>
		<canvas id="canvas" width="450" height="368">
		</canvas>
		<video id="video" width="450" height="368" autoplay="autoplay">
		</video>
 
		<script>
			$(function() {
				var cxt = canvas.getContext("2d");
				canvas = document.getElementById("canvas");
				video = document.getElementById("video");
 
				if(!navigator.getUserMedia)
					navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
				if(!window.URL)
					window.URL = window.webkitURL;
 
				if (navigator.getUserMedia) {
					navigator.getUserMedia({
						"video" : true,
						"audio": false
					}, function(stream) {
						video.src = window.URL.createObjectURL(stream);
						video.play();
					},function(err){
						console.log("Ocurrió el siguiente error: " + err);
					});
				}
				else{
					alert("getUserMedia no disponible");
					return;
				}
 
				// Evento click para capturar una foto.

				$("#foto").click(function() {

					cxt.drawImage(video, 0, 0, 450, 368);
				});
 
				// Evento click para enviar la foto al servidor.

				$("#enviar").click(function() {

					var data = canvas.toDataURL("image/jpeg");
					$.ajax({
						type : "POST",
						url : "/guardar_foto",
						contentType : "canvas/jpeg",
						data : data,
						success : function(result) {
							console.log("result:", result);
						}
					});
				});
			});
		</script>
	</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Daniel

Camara web - Guardar Imagen

Publicado por Daniel (4 intervenciones) el 30/04/2014 09:26:55
y como seria el guardar foto.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Camara web - Guardar Imagen

Publicado por aquiles (9 intervenciones) el 30/04/2014 20:54:51
El código final queda así HTML y PHP:

HTML: webcam.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
	<head>
		<!-- ajustar el jquery -->
		<title>WEBCAM</title>
		<script src="/jquery.js" type="text/javascript"></script>
	</head>
	<body>
		<button id="foto">
			Tomar Foto!
		</button>
		<button id="enviar">
			Enviar Foto!
		</button>
		<canvas id="canvas" width="450" height="368">
		</canvas>
		<video id="video" width="450" height="368" autoplay="autoplay">
		</video>
 
		<script>
			$(function() {
				var cxt = canvas.getContext("2d");
				canvas = document.getElementById("canvas");
				video = document.getElementById("video");
 
				if(!navigator.getUserMedia)
					navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
				if(!window.URL)
					window.URL = window.webkitURL;
 
				if (navigator.getUserMedia) {
					navigator.getUserMedia({
						"video" : true,
						"audio": false
					}, function(stream) {
						video.src = window.URL.createObjectURL(stream);
						video.play();
					},function(err){
						console.log("Ocurrió el siguiente error: " + err);
					});
				}
				else{
					alert("getUserMedia no disponible");
					return;
				}
 
				// Evento click para capturar una foto.

				$("#foto").click(function() {

					cxt.drawImage(video, 0, 0, 450, 368);
				});
 
				// Evento click para enviar la foto al servidor.

				$("#enviar").click(function() {

					var data = canvas.toDataURL("image/jpeg");
 
					// Separamos el "data:image/jpeg;base64,"

					var info = data.split(",", 2);
					$.ajax({
						type : "POST",
						url : "/guardar_foto.php",
						data : {
							type : info[0],
							data : info[1]
						},
						success : function(result) {
							console.log("result:", result);
						}
					});
				});
			});
		</script>
	</body>
</html>

PHP: guardar_foto.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
$jpg = base64_decode($_POST["data"]);
$file = fopen("foto.jpg", "w");
if($file){
        // Debe tener permiso de escritura.

	fwrite($file, $jpg);
	fclose($file);
	echo "ok";
}
else{
	echo "Error al abrir archivo";
}
 
?>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Daniel

Camara web - Guardar Imagen

Publicado por Daniel (4 intervenciones) el 30/04/2014 21:33:30
Gracias amigo por darme la solucion a mi problema.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Camara web - Guardar Imagen

Publicado por victor tello (1 intervención) el 06/10/2017 02:03:53
una vez que tienes esta parte, en cual carpeta estan almacenados los datos en el servidor?
hasta aqui esta excelente, mi intencion es hacer ua insercion en la base de datos con la imagen generada
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

y como desactivo la camara luego q ya tomé la foto

Publicado por David Carranza (1 intervención) el 09/02/2018 18:42:06
buenas tardes, Esta chévere, pero luego q ya tomé la foto, como puedo apagar la cámara, porque se queda encendido el foquito, debe haber una opción algo así como video.play(); video.stop; se me ocurre... alguien que lo aya hecho por favor
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

y como desactivo la camara luego q ya tomé la foto

Publicado por Gregory Duarte (1 intervención) el 22/06/2018 23:52:43
Saludos amigo, si yo quisiera almacenar esa imagen directamente en una columna de mi base de datos, como lo haria?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar