Subir una foto tomada con la cámara web a una base de datos MySQL php

publicado por: Anonymous

Quiero saber, ¿cómo puedo tomar una imagen tomada con la cámara web de la laptop, almacenada en canvas y subirla a mi base de datos?
Les dejo el código. Puse un input con method="post" action="datbase.php" porque estaba intentando lo de la base de datos con php.

Gracias de antemano.

_x000D_

_x000D_

function activateCamera() {_x000D_
_x000D_
	var video = document.querySelector("#camaraOn");_x000D_
	navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMEdia;_x000D_
    if (navigator.getUserMedia) {_x000D_
        navigator.getUserMedia({video: true}, handleVideo, videoError);_x000D_
    }_x000D_
    function handleVideo(stream) {_x000D_
        video.src = window.URL.createObjectURL(stream);_x000D_
    }_x000D_
    function videoError(e) {_x000D_
        alert("La camara No esta funcionando Permita el acceso")_x000D_
    }_x000D_
}_x000D_
_x000D_
_x000D_
//Funcion para capturar el streaming_x000D_
function tomarFoto() {_x000D_
_x000D_
	    var video = document.querySelector("#camaraOn");_x000D_
			canvas=document.getElementById("fotoTomada");_x000D_
			let {left,top}= video.getBoundingClientRect();_x000D_
_x000D_
	    canvas.width=1080;_x000D_
	    canvas.height=650;_x000D_
_x000D_
	    canvas.getContext("2d").drawImage(video,0,0,1080,650);_x000D_
			canvas.style.left=`${left}px`;_x000D_
			canvas.style.top=`${top}px`;_x000D_
			canvas.style.position="absolute";_x000D_
			canvas.toDataURL("image/png");_x000D_
			fotAux=canvas.toDataURL("image/png");_x000D_
			input= document.getElementById("urlImg");_x000D_
			input.value=fotAux;_x000D_
_x000D_
			canvas.style.visibility="visible";_x000D_
			btnGuard= document.getElementById("btnGuard");_x000D_
			btnGuard.style.visibility="visible";_x000D_
_x000D_
			btnFotoTomada= document.getElementById("btnTake");_x000D_
			btnFotoTomada.style.visibility="hidden";_x000D_
			btnFotoTomada.disabled=true;_x000D_
_x000D_
}

_x000D_

<!DOCTYPE html>_x000D_
<html>_x000D_
  <head>_x000D_
    <title> SnapDCU </title>_x000D_
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>_x000D_
    <!-- Latest compiled and minified CSS -->_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">_x000D_
_x000D_
<!-- Optional theme -->_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">_x000D_
_x000D_
<!-- Latest compiled and minified JavaScript -->_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>_x000D_
    <script src="js/kickstart.js"></script> <!-- KICKSTART -->_x000D_
    <link rel="stylesheet" href="css/kickstart.css" media="all" /> <!-- KICKSTART -->_x000D_
    <script src="js/script.js"> </script>_x000D_
_x000D_
  </head>_x000D_
  <header>_x000D_
_x000D_
    <nav class="navbar-inverse">_x000D_
      <div class="container-fluid">_x000D_
        <div class="navbar-header">_x000D_
        <a class="navbar-brand" href="index.php">SnapWebDCU</a>_x000D_
      </div>_x000D_
      <ul class="nav navbar-nav">_x000D_
        <li class="active"><a href="index.php">Inicio</a></li>_x000D_
        <li> <a href="klk.php">Fotos</a></li>_x000D_
_x000D_
      </ul>_x000D_
    </div>_x000D_
_x000D_
    </nav>_x000D_
_x000D_
  </header>_x000D_
_x000D_
  <body onload="activateCamera()">_x000D_
    <style>_x000D_
    .canvasCamara{_x000D_
      position: relative;_x000D_
    }_x000D_
    .canvasCamara>.botonesAccion{_x000D_
      background: url('css/img/shotpng.png') bottom center no-repeat;_x000D_
       height: 145px;_x000D_
       left: 50%;_x000D_
       margin: -64px 0 0 -64px;_x000D_
       position: absolute;_x000D_
       top: 85%;_x000D_
       border: 15px solid transparent;_x000D_
       width: 145px;_x000D_
       z-index: 1;_x000D_
    }_x000D_
_x000D_
_x000D_
_x000D_
    .canvasCamara>.btnGuard{_x000D_
      visibility: hidden;_x000D_
      background: url('css/img/derecha.png') bottom right no-repeat;_x000D_
       height: 145px;_x000D_
       left: 50%;_x000D_
       margin: -64px 0 0 -64px;_x000D_
       position: absolute;_x000D_
       top: 85%;_x000D_
       border: 15px solid transparent;_x000D_
       width: 145px;_x000D_
       z-index: 1;_x000D_
_x000D_
    }_x000D_
_x000D_
_x000D_
_x000D_
_x000D_
    </style>_x000D_
_x000D_
    <div class="container">_x000D_
      <div class="canvasCamara">_x000D_
        <video autoplay="true" width="1080" id="camaraOn" height="650"> </video>_x000D_
        <button class="botonesAccion" onclick="tomarFoto()" type="button" id="btnTake" name="btnTake"></button>_x000D_
      </div>_x000D_
_x000D_
      <div class="divCanv">_x000D_
            <canvas id="fotoTomada" height="1" width="1" ></canvas>_x000D_
_x000D_
            <form class="btnGuard" method="post" action="database.php">_x000D_
              <input type="text" id="urlImg" name="urlImg"/>_x000D_
                <button id="btnGuard" type="submit"   name="btnGuard"></button>_x000D_
            </form>_x000D_
_x000D_
_x000D_
      </div>_x000D_
_x000D_
_x000D_
_x000D_
_x000D_
_x000D_
    </div>_x000D_
_x000D_
  </body>_x000D_
_x000D_
_x000D_
_x000D_
</html>

_x000D_

_x000D_

_x000D_

solución

Cuando tomas una foto lo haces con canvas, pintando en el método Context#drawImage el elemento video en donde se reproduce el MediaStream. Una vez que se ha pintado el cuadro en el instante en que llamas a drawImage, el canvas está disponible para obtener una URL.

let photo = canvas.toDataURL('image/png');

El método Canvas#toDataURL regresa una URL data; este tipo de URLs sirven para “camuflar” pequeños archivos en una URL; en caso pases un mime correspondiente a una imagen, este método retornará la imagen en formato base64

Guardar dicha imagen en una base de datos MySQL se puede hacer de distintas formas, cada una de ellas corresponde a cómo está definida la tabla en la base de datos.


Columna Text/Varchar

En caso la columna esté definida como Text o Varchar o cualquier otra columna que te permita insertar texto, puedes almacenar directamente la imagen en formato base64.

INSERT INTO photos(data) VALUES($b64_photo);

Columna Blob

En caso la columna sea Blob o derivadas como LongBlob, primero se necesita convertir la imagen en base64 a un objeto binario. Esto puedes hacerlo tanto en el cliente como en el servidor.

Convertir base64 a File

Para convertir una imagen codificada en base64 a File, primero es necesario crear un objeto Blob a partir de ella. Sin embargo, el constructor de File no está soportado en IE11 ni Edge.

El mismo fin puedes lograr convertiendo el base64 a un blob mediante un Uint8Array. Este tipo de dato almacena enteros sin signo de 8 bits.

function dataURI2Blob(uri) {
  let [ info, encoded ] = photo.split(',');
  let mime = info.match(/:(.*?);/)[1];
  let bstr = atob(encoded);
  let data = new Uint8Array(bstr.length);

  for (let i = 0; i < bstr.length; i++) {
    data[i] = bstr.charCodeAt(i);
  }

  return new Blob([data] { type: mime });
}

La función anterior solo recorre el string en bytes del base64 y obtiene por cada letra su representación Unicode, luego la agrega al array. Finalmente, le pasa el array a Blob indicando su respectivo mime type.


En este punto, lo único que tienes que hacer es enviar el Blob por AJAX mediante un FormData:

Nota: el siguiente ejemplo usa la nueva API para peticiones AJAX en JavaScript. En caso no uses el polyfill, hazlo por medio de XMLHttpRequest o por jQuery.

let photo = canvas.toDataURI('image/png');
let data = new FormData();

data.append('photo', dataURI2Blob(photo);

fetch ('/endpoint', {
  method: 'POST',
  body: data
)
.then(res => res.text())
.then(res => alert(res));

En PHP, escribe la imagen en un directorio temporal, luego léela y la insertas en la base de datos.

$img = fopen($_FILES['photo']['tmp_name'], 'rb');
$stmt->bind_param("b", $null);
$stmt->send_long_data(0, $img);
$stmt->execute();

echo "Tu foto ha sido subida";
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *