1

hola necesito ayuda con un proyecto que estoy realizando, tengo un input file en un formulario que deseo enviar a mi servidor php con laravel, asi mismo tengo un boton que abre la camara de la laptop y la captura en un canvas... quiero hacer que, esa imagen se procese y se envie en el input fyle a mi servidor.. les pongo mi codigo que he probado pero no funciona (javascript):

var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
canvas.getContext('2d').drawImage(video, 100, 0, 480, video.videoHeight, 0, 0, 120, 160);
var data = canvas.toDataURL('image/png');
previa.setAttribute('src', data);
$("#foto").val(data);  -->>> esta es la linea  donde intento setear el input

Intente asi y tambien con javascript puro en vez de val

document.getElementById('foto').setAttribute('value', data);

les muestro el codigo html que tengo

<video id="video" width="auto" height="auto" autoplay class="img-responsive"></video>
<a id="startbutton" class="btn btn-success" style="margin-top: -20%">Tomar foto</a>
<canvas id="canvas" style="display: none" width="122"></canvas>
<input id="foto" name="foto" type="file" accept="image/*" capture="camera">

la verdad no se que esta mal por que al querer guardar y al enviar este dato con la imagen, me sale que el campo foto no debe ser vacio, por que asi lo tengo validado en el servidor

1 respuesta 1

1

Conseguí hacerlo y queria responder a mi pregunta: lo que hice fue poner un input en el formulario que se iba a enviar (esto de lado del cliente):

<input id='fotocamara' name="fotocamara" type="text" class="form-control" style="display: none" />

para hacer la captura utilicé javascript, convirtiendo la imagen a formato url, y eso lo insertaba en el input de la siguiente manera:

document.getElementById("startbutton").addEventListener("click", function() {
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
canvas.getContext('2d').drawImage(video, 100, 0, 480, video.videoHeight, 0, 0, 120, 160); 
var data = canvas.toDataURL('image/png');
document.getElementById('fotocamara').setAttribute('value', data);  });

y de lado del servidor, en mi controlador lo que hago es leer ese input y convertirlo a base64:

 $img = $request->fotocamara;
 $img = str_replace('data:image/png;base64,', '', $img);
 $img = str_replace(' ', '+', $img);
 $image = base64_decode($img);

 $extension="png";
 $filename='fotocamara'.date('Y-m-d').'.'.$extension;
 //guardamos archivo 
 Image::make($image)->resize(144,144)->save(public_path("storage\\personas\\".$filename));

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.