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:
No se que podría estar pasando.