I need your help a week ago I am trying to store an image of a Canvas in a mysql table, the column of the table is of type longblob. the HTML is as follows:
<!DOCTYPE html PUBLIC >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Registro</title>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/webcam.js"></script>
</head>
<body>
<div>
<video id="player" autoplay="true" width="200" height="100"></video>
</div>
<form accept-charset="utf-8" method="post" id="enviarimagenes" name="enviarimagenes" enctype="multipart/form-data" >
<br><label>Primer nombre</label></br>
<input name="p_nombre" id="p_nombre" type="text" maxlength="15" />
<br><label>Segundo nombre</label></br>
<input name="s_nombre" id="s_nombre" type="text" maxlength="15" />
<br><label>Primer apellido</label></br>
<input name="p_apellido" id="p_apellido" type="text" maxlength="15" />
<br><label>Segundo apellido</label></br>
<input name="s_apellido" id="s_apellido" type="text" maxlength="15" />
<br><label>Tipo dentificación</label></br>
<select name="tipoindetificacion" id="tipoindetificacion">
<option value=1 >Cédula de cuidadania</option>
<option value=2 >Tarjeta de identidad</option>
<option value=3 >Cédula de extanjería</option>
</select>
<br><label>Identificación</label></br>
<input name="identificaion" id="identificacion" type="text" maxlength="25" />
<br><label>Apartamento a visitar</label></br>
<br><select name="apartamento" id="apartamento"></select></br>
<canvas id="canvas"></canvas>
</form>
<div>
<input id="tfoto" type="button" onclick = "takepicture()" value="Tomar foto" />
</div>
<div>
<input name="other" id="other" type="button" value="Enviar" onclick="registrar()" />
</div>
</body>
</html>
the webcam.js script is:
(function(){
cargarapartamentos();
var mediaOptions = { audio: false, video: true };
if (!navigator.getUserMedia) {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.mediaDevices.getUserMedia;
}
if (!navigator.getUserMedia){
alert('getUserMedia not supported in this browser.');
}
navigator.getUserMedia(mediaOptions, success, function(e) {
console.log(e);
});
function success(stream){
var video = document.querySelector("#player");
video.src = window.URL.createObjectURL(stream);
}
})()
function takepicture() {
var canvas = document.getElementById('canvas');
var video = document.getElementById('player');
var context = canvas.getContext('2d');
var videowidth = video.videoWidth;
var videoheight = video.videoHeight;
canvas.width = videowidth;
canvas.height = videoheight;
context.drawImage(video, 0, 0, videowidth, videoheight);
};
function registrar(){
var fecha_hora = Date();
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var imagenurl = canvas.toDataURL("image/png",0.8);
imagenurl = imagenurl.substr(22, imagenurl.length);
var param = { p_nombre:document.getElementById('p_nombre').value,
s_nombre:document.getElementById('s_nombre').value,
p_apellido:document.getElementById('p_apellido').value,
s_apellido:document.getElementById('s_apellido').value,
tipoindetificacion:document.getElementById('tipoindetificacion').value,
identificacion:document.getElementById('identificacion').value,
fecha_hora_in:fecha_hora,
imagen_jpeg:imagenurl,
apartamento:document.getElementById('apartamento').value};
$.ajax({
type: 'POST',
url: "http://localhost/registroInconjunto/phps/insertarregistro.php",
data: param,
dataType: 'text'
}).done(function(data) {
alert(data);
}).fail(function(xhr, textStatus, error) {
console.log(xhr.statusText);
console.log(textStatus);
console.log(error);
}).always(function() {
alert("se ejecutó la funcion registrar.");
});
};
function cargarapartamentos(){
$.ajax({
type: 'POST',
url: "http://localhost/registroInconjunto/phps/buscarapartamentos.php",
contentType: "application/json",
dataType: 'json'
})
.done(function(data) {
$.each(data, function(i, item) {
var elemento = document.getElementById('apartamento');
var option = document.createElement("option");
option.value = item.id_apartamento;
option.text = item.apartolugar;
elemento.add(option);
});
}).fail(function(xhr, textStatus, error) {
console.log(xhr.statusText);
console.log(textStatus);
console.log(error);
}).always(function() {
// called after done or fail
});
};
When the page is opened, the script loads a list into the slect apartment, besides this opens the webcam. The takepicture function takes a picture of the camera and places it in the canvans.
the database is call registro_conjuntos and hava to table registration_entrada_personas
CREATE TABLE 'registro_entrada_personas' (
'id' int(10) UNSIGNED NOT NULL COMMENT 'id de tabla',
'apartamento' int(10) UNSIGNED NOT NULL COMMENT 'numero del apartamento',
'p_nombre' text COLLATE utf8_spanish_ci NOT NULL,
's_nombre' text COLLATE utf8_spanish_ci NOT NULL,
'p_apellido' text COLLATE utf8_spanish_ci NOT NULL,
's_apellido' text COLLATE utf8_spanish_ci NOT NULL,
'tipo_indentificacion' int(10) UNSIGNED NOT NULL COMMENT 'cc, ti, ce, etc',
'indentificacion' varchar(30) COLLATE utf8_spanish_ci NOT NULL,
'fecha_hora_in' datetime NOT NULL COMMENT 'hora de entrada',
'imagen_jpeg' longblob NOT NULL COMMENT 'imagen tomada'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci COMMENT='tabla registro de entrada visitantes';
the php is:
<?php
header("Content-Type: text/html;charset=utf-8");
date_default_timezone_set("America/Bogota");
error_reporting (E_ALL ^ E_NOTICE);
$p_nombre = $_POST['p_nombre'];
$s_nombre = $_POST['s_nombre'];
$p_apellido = $_POST['p_apellido'];
$s_apellido = $_POST['s_apellido'];
$tipoindetificacion = $_POST['tipoindetificacion'];
$identificacion = $_POST['identificacion'];
$fecha_hora_in = $_POST['fecha_hora_in'];
$imagen_jpeg = $_POST['imagen_jpeg'];
$apartamento = $_POST['apartamento'];
$conexion = mysqli_connect("127.0.0.1", "xxxx", "xxxxxxxx", "registro_conjuntos");
if (mysqli_connect_errno()) {
printf("Conexión fallida: %s\n", mysqli_connect_error());
exit();
}else{
$fecha_hora_in = date('Y-m-d H:i:s');
mysqli_set_charset($conexion,"utf8");
$sentenciaInsertar = "INSERT INTO 'registro_entrada_personas' ('id', 'apartamento', 'p_nombre', 's_nombre', 'p_apellido', 's_apellido', 'tipo_indentificacion', 'indentificacion', 'fecha_hora_in', 'imagen_jpeg') VALUES (NULL, '{$apartamento}', '{$p_nombre}', '{$s_nombre}', '{$p_apellido}', '$s_apellido', '{$tipoindetificacion}', '{$identificacion}', '{$fecha_hora_in}', '{$dataimagen}')";
$resultado = mysqli_query($conexion, $sentenciaInsertar);
if ($resultado) {
echo $imagen_jpeg;
} else {
echo "Error Php: " + mysqli_error($conexion);
}
$close = mysqli_close($conexion);
}
?>
The data is stored in the table but the encoded image is not. I have tried to store without removing the "data: image / png; base64," from the header of the imageurl variable and which I do with imagenurl.substr (22, imagenurl.length); however the variable is stored in the table but unformatted and is not displayed by phpmyadmin