JQuery - Camara web - Guardar Imagen

   
Vista:
Imágen de perfil de Daniel

Camara web - Guardar Imagen

Publicado por Daniel danielqg93@gmail.com (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

Camara web - Guardar Imagen

Publicado por xve (557 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