I have a button that takes a screenshot of a div by clicking on a button that div has a photicle that by clicking on the save button is saved by submit in mysql but I would like to click on the capture button (screenshot button) execute the function yours and then the submit, and tried with onsubmit="example ();" in the form but it does not work and put the save button onclick="screenshot ();" but it does not work either just take the catch does not save or vice versa thank you for the help in advance
my insert code:
<?php
$conn= mysqli_connect("localhost","root","","prueba");
$resultado = "";
$nombre=@$_POST["nombre"];
$cedula=@$_POST["cedula"];
$telefono=@$_POST["telefono"];
if (isset ($_POST['submit'])){
$strSQL = "INSERT into datosUsuario(nombre,cedula,telefono) values ('$nombre','$cedula','$telefono')";
$verificar_cedula = mysqli_query($conn,"SELECT * From datosUsuario where cedula = '$cedula'");
if(mysqli_num_rows($verificar_cedula)>0 ){
echo'esta cedula ya se ha ingresado';
exit;
}
$verificar_telefono = mysqli_query($conn,"SELECT * From datosUsuario where telefono = '$telefono'");
if(mysqli_num_rows($verificar_telefono)>0 ){
echo'esta telefono ya se ha ingresado';
exit;
}
$query = mysqli_query($conn, $strSQL);
if($query){
$resultado = "exitoso";
}else{
$resultado = "error";
}
}
?>
este es el form:
<div class="top-img" id="top-img">
<form action="index.php" method="post" name="submit">
<div class="container">
<div class="formulario">
<br><br>
<div class="col-md-12">
<input type="text" name="nombre"required id="nombre"autocomplete="off"onkeypress="return soloLetras(event)" placeholder="ingrese un nombre...">
</div>
<br><br>
<div class="col-md-12">
<input type="text" name="cedula"required id="cedula"autocomplete="off"onkeypress="return valida(event)" placeholder="ingrese la cedula...">
</div>
<br><br>
<div class="col-md-12">
<input type="text"name="telefono"required id="telefono"autocomplete="off"onkeypress="return valida(event)" placeholder="telefono..">
<br><br>
<button class="btn btn-primary" id="boton-descarga">Descargar certificado</button>
<button id="btn" hidden>Enviar</button>
</div>
</div>
</div>
</form>
este es el codigo que crea el pantallazo:
<script>
function downloadCanvas(canvasId, filename) {
// Obteniendo la etiqueta la cual se desea convertir en imagen
var domElement = document.getElementById(canvasId);
// Utilizando la función html2canvas para hacer la conversión
html2canvas(domElement, {
onrendered: function(domElementCanvas) {
// Obteniendo el contexto del canvas ya generado
var context = domElementCanvas.getContext('2d');
// Creando enlace para descargar la imagen generada
var link = document.createElement('a');
link.href = domElementCanvas.toDataURL("image/png");
link.download = filename;
// Chequeando para browsers más viejos
if (document.createEvent) {
var event = document.createEvent('MouseEvents');
// Simulando clic para descargar
event.initMouseEvent("click", true, true, window, 0,
0, 0, 0, 0,
false, false, false, false,
0, null);
link.dispatchEvent(event);
} else {
// Simulando clic para descargar
link.click();
}
}
});
}
// Haciendo la conversión y descarga de la imagen al presionar el botón
$('#boton-descarga').click(function() {
downloadCanvas('top-img', 'certificado.png');
});
</script>