0

Estoy usando signature_pad.js para guardar una firma en la base de datos, pero la imagen que guarda es una imagen inválida.

les dejo el código:

document.getElementById('form').addEventListener("submit", function(e)
{
  var ctx = document.getElementById("canvas").getContext("2d");
  var image = ctx.toDataURL("image/png"); // Agregar "image/png" aquí
  document.getElementById('base64').value = "data:image/png;" + image; // Agregar "data:image/png;" aquí
}, false);

document.getElementById('borrar').addEventListener("click", function(e){
 e.preventDefault();
 var ctx = document.getElementById("canvas").getContext("2d");
 ctx.clearRect(0, 0, canvas.width, canvas.height);
  document.getElementById('base64').value = '';
}, false);

if(document.getElementById('base64').value == ''){
  alert("No hay firma");
}
<input type="hidden" name="base64" value="" id="base64">
<div id="signature-pad" class="signature-pad" >
<label class="" for="">Firma:</label>
<div class="signature-pad--body">
<canvas style="width: 640px; height: 420px; border: 1px black solid; " id="canvas"></canvas>
</div>
</div>
<button id="borrar">Borrar</button>

PHP

$folderPath = "upload/";
$img = $_POST['base64'];
$img = str_replace('data:image/png;base64,', '', $img);
$fileData = base64_decode($img);
$fileName = $folderPath . uniqid().'.png';
file_put_contents($fileName, $fileData);


Después hago en INSERT en la base, hasta ahí todo bien, pero la imagen que me guarda en la carpeta UPLOAD es un archivo invalido.

Así se ve la imagen:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

No se que podría estar pasando.

9
  • Favor poner un ejemplo reproducible ejemplo mínimo verificable
    – Yussef
    Commented el 14 feb. 2023 a las 16:47
  • Ahi agregue el JS que faltaba, no se puede reproducir php por aca Commented el 14 feb. 2023 a las 17:04
  • 1
    Mira he colocado tu código en un snippet, da errores (falta el form), luego si agregas el form no hace nada, porque falta la librería que indicas que usas. Tienes que colocar todo lo necesario para reproducir el problema hasta el punto del PHP.
    – Yussef
    Commented el 14 feb. 2023 a las 17:12
  • No me permite poner el código completo, dice que es demasiado código Commented el 14 feb. 2023 a las 18:08
  • 1
    @Yussef jamas podra colocar un EMV teniendo en cuenta que se trata de PHP y el snipped de SOes no ejecuta php... tampo permite subir archivos... Commented el 14 feb. 2023 a las 19:18

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.