Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] TOmar foto y guardar img HTML5

Estas en el tema de TOmar foto y guardar img HTML5 en el foro de HTML en Foros del Web. bueno he estado en un proyecto y me he quedado trancado con algo, necesito que el sistema agregue a una persona y poder tomarle la ...
  #1 (permalink)  
Antiguo 30/04/2014, 14:22
 
Fecha de Ingreso: marzo-2011
Mensajes: 120
Antigüedad: 13 años, 1 mes
Puntos: 3
TOmar foto y guardar img HTML5

bueno he estado en un proyecto y me he quedado trancado con algo, necesito
que el sistema agregue a una persona y poder tomarle la foto y guardar esa imagen,
lo he hecho con html pero a veces funciona y otras no, tengo un formulario normal
para los datos y para tomar la foto es el problema

tengo esto por un lado
crear_transportista.php
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<meta name="author" content="cblanco" />
<link rel="stylesheet" href="../../components/jquery-ui-1.10.3/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="../../components/jquery-ui.js"></script>
<script src="../../components/jquery.maskedinput.js" type="text/javascript"></script>
<script>
 $(document).ready(function() {
 	$("#foto").hide();
 	$("#form1").submit(function() {
 		var dep = $("#em_t").val();
		var login = $("#nombre").val();
		var ape = $("#apellido").val();
		var ced = $("#cedula").val();
 		if(dep == 0 || login ==""|| ape ==""|| ced ==""){
 			alert("Verifique que los campos no se encuentren vacios.");
 			return false;
 		}
	});
	$("#snap").click(function (){
		var ced = $("#cedula").val();
		if(ced != "")
		{
			$("#foto").show();
			$("#Tomar_foto").hide();
			var canvas = document.getElementById('canvas');
			var dataURL = canvas.toDataURL("image/png");
			$.ajax({
			  type: "POST",
			  url: "script.php",
			  data: { 
			     imgBase64: dataURL,
			     cedula: ced
			  }
			}).done(function(o) {
			  console.log('saved'); 
			});
		}else{
			alert("Antes de tomar la foto debe haber rellenado los campos: Nombre, Apellido y Cedula.");
		}
		
	});	
  });

</script>
</head>
<body>
	<?php 
	include ('../../components/p_con.php');
	$adempiere_con = conexion_adempiere();
  $str = "SELECT m_shipper_id, ad_client_id, ad_org_id, isactive, created, createdby, 
       updated, updatedby, name, description, c_bpartner_id, trackingurl
  FROM m_shipper;";
	if($adempiere_con != FALSE){
		$query = pg_query($adempiere_con, $str);
	}else{
		echo "Error: ".pg_last_error();
	}	
?>
<div >
	<h3>Agregar Transportistas</h3>
<form id="form1" name="form1" method="post" action="agregar_chofer.php">
  <table border="1">
    <tr bgcolor="#FFFFFF">
      <td>Nombre</td>
      <td><label for="nombre"></label>
      <input type="text" name="nombre" id="nombre" /></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td>Apellido</td>
      <td><label for="apellido"></label>
      <input type="text" name="apellido" id="apellido" /></td>
    </tr>
    <tr bgcolor="#FFFFFF" >
      <td>Cedula</td>
      <td><label for="cedula"></label>
      <input type="text" name="cedula" id="cedula" placeholder="20000000"/></td>
    </tr>

    <tr bgcolor="#FFFFFF" >
      <td>Empresa de Transporte:</td>
      <td><label for="empresa de transporte"></label>
      <select name="em_t" id="em_t">
      	<option value="0">Seleccione la empresa de transporte...</option>
      	<?php while($arry_et = pg_fetch_array($query)){?>  
      		<option value="<?php echo $arry_et['name']; ?>"><?php echo $arry_et['name']; ?></option>
      	<?php } ?>     	
      </select>
      </td>
      </tr>      
     <tr bgcolor="#FFFFFF" >
      <td colspan="2">
        <input type="submit" name="bottom" id="bottom" value="GUARDAR" />
      </label></td>
      </tr>
  </table>
  </form>
  <div>
  	  <div id="Tomar_foto">
  			<video id="video" autoplay="autoplay" height="200" width="200"></video>
			<button id="snap" class="sexyButton">TOMAR FOTO</button>
  	  </div>
  		<div id="foto">
  			<canvas id="canvas" width="200" height="200"></canvas>
  		</div>
  </div>

  <script>

		// Put event listeners into place
		window.addEventListener("DOMContentLoaded", function() {
			// Grab elements, create settings, etc.
			var canvas = document.getElementById("canvas"),
				context = canvas.getContext("2d"),
				video = document.getElementById("video"),
				videoObj = { "video": true },
				errBack = function(error) {
					console.log("Video capture error: ", error.code); 
				};

			// Put video listeners into place
			if(navigator.getUserMedia) { // Standard
				navigator.getUserMedia(videoObj, function(stream) {
					video.src = stream;
					video.play();
				}, errBack);
			} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
				navigator.webkitGetUserMedia(videoObj, function(stream){
					video.src = window.webkitURL.createObjectURL(stream);
					video.play();
				}, errBack);
			} else if(navigator.mozGetUserMedia) { // WebKit-prefixed
				navigator.mozGetUserMedia(videoObj, function(stream){
					video.src = window.URL.createObjectURL(stream);
					video.play();
				}, errBack);
			}

			// Trigger photo take
			document.getElementById("snap").addEventListener("click", function() {
				context.drawImage(video, 0, 0, 200, 200);
			});
		}, false);

	</script>
</div>
</body>
</html>

script.php

Código PHP:
<?php 
define
('UPLOAD_DIR''fotos/');
$img $_POST['imgBase64'];
$ced $_POST['cedula'];
$img str_replace('data:image/png;base64,'''$img);
$img str_replace(' ''+'$img);
$data base64_decode($img);
$file UPLOAD_DIR.$ced.'.png';
$success file_put_contents($file$data);
print 
$success $file 'Unable to save the file.';

?>
agrega_transportista.php

Código PHP:
<?php 
include ('../../components/p_con.php');
$nombre $_POST['nombre'];
$apellido $_POST['apellido'];
$ced $_POST['cedula'];
$emt $_POST['em_t'];


$str_query "INSERT INTO web.transportistas (t_nombre, t_apellido, t_ced,emt) 
                        VALUES('$nombre','$apellido','$ced','$emt')"
;
if(
pg_query($link$str_query))
{
    echo 
"<script type='text/javascript'>
            window.location = 'crear_transportistas.php'
         </script>"
;
    }else{
        echo 
"Error:".pg_last_error();
    }
?>
pero las imagens cuando voy a ver me salen vacias, alguien podria ayudarme?? o sabria pq ocurre este error??
  #2 (permalink)  
Antiguo 05/05/2014, 07:58
 
Fecha de Ingreso: marzo-2011
Mensajes: 120
Antigüedad: 13 años, 1 mes
Puntos: 3
Respuesta: TOmar foto y guardar img HTML5

Alguna ayuda, comentario, algo?? hehehe

Etiquetas: css, formulario, foto, html5, img, php, tomar, url, video
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:26.