Skip to main content
4 de 6
se añadieron 202 caracteres en el cuerpo
Yussef
  • 23.4k
  • 4
  • 12
  • 29

Imagen con archivo invalido

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.