2

Necesito obtener la imagen con la firma realizada con plugin jSignature, pero a la hora de mostrar u obtener la ruta/string/imagen codificada en base64 no me funciona.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jSignature/2.1.2/jSignature.min.js" integrity="sha256-D7kWEIHWLFrjqBvSjtsbAWsGSn89lacfFhOShSU/Xuk=" crossorigin="anonymous"></script>
<label>Firma:</label>
<div id="firma1" style="border: 1px solid"></div>

<script>
$(document).ready(function(){
    $("#firma1").jSignature();
});

var rutaImagenFirma1 = $("#firma1").jSignature("getData", "image");
</script>

En esta última línea es donde en teoría obtengo la imagen codificada en base64, pero me aparece incompleta. Hay un trozo donde aparece ... y faltan ahi nº/letras/símbolos. Ya que esa ruta la muestro, la pego en el navegador y no se visualiza la imagen (en la rutaImagenFirma falta delante "data:" ya que el programa me da la ruta sin ese trozo.

Necesito obtener la firma como imagen codificada en base64.

1 respuesta 1

3

El problema que estás sufriendo es debido a que el bloque $(document).ready(...) se ejecutará tras estar preparado el documento y es probable que el código jSignature("getData", "image") se ejecute antes de que el contenedor de la firma esté iniciado.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jSignature/2.1.2/jSignature.min.js" integrity="sha256-D7kWEIHWLFrjqBvSjtsbAWsGSn89lacfFhOShSU/Xuk=" crossorigin="anonymous"></script>
<table><tbody><tr>
<td width="48%">
  <label>Firma:</label><br/>
  <div id="firma1" style="border: 1px solid blue"></div>
</td>
<td>
  <label>Copia:</label><br/>
  <img id="resultado" style="border: 1px solid red" />
</td>
</tr></tbody></table>
<button id="exportar">Pulse para exportar</button>
<br/><br/><br/><br/><br/><br/>
<script>
/* Iniciamos la zona de firma */
$(function(){
    $("#firma1").jSignature();
});

/* Capturamos el evento onClick del botón */
$( "#exportar" ).click(function() {
  /* Datos devueltos por jSignature (tipo mime y datos en base64) */
  var datos = $( "#firma1" ).jSignature("getData", "image");
  /* Cadena base64 útil montada a partir de los datos proporcionados */
  var base64 = "data:" + datos.join(',');
  console.log(base64);
  $( "#resultado" ).attr("src", base64);
});
</script>

Cuando pulses el botón te aparecerá en consola la imagen codificada correctamente en base64 y se realizará una copia en una imagen adicional para demostrarte que está correctamente formado.

5
  • Esa imagen codificada si que existe cuando la pego en el navegador, pero habría alguna forma de codificarla pero que sea jpg? Es que cuando esa png la añado a un pdf con jsPdf no me deja abrir el pdf, en cambio cuando es una imagen jpeg codificada si que me deja abrir el archivo.
    – M. Giner
    el 7 feb. 2018 a las 9:11
  • 1
    Si es una pregunta diferente deberías abrir una pregunta nueva. Sí, se puede hacer modificando el código de jSignature o bien con otro truco buscando el canvas interno creado y usando toDataURL en él. Pero las modificaciones son importantes para agregarlas a esta respuesta y confundir a otra persona que busque una solución a la misma pregunta que planteas. el 7 feb. 2018 a las 9:14
  • 1
    Aquí tienes tu ejemplo, he aprovechado tu otra pregunta: https://es.stackoverflow.com/questions/136759/codificar-imagen-en-base64/136777#136777. Agradecería un voto positivo y que marques como correcta la respuesta si ambas solucionan los problemas que tenías. Gracias. el 7 feb. 2018 a las 9:33
  • 1
    Por supuesto. Eres el p**o. amo! Te lo agradezco. Me has salvado la vida en ambos sitios.
    – M. Giner
    el 7 feb. 2018 a las 10:16
  • 1
    Lo dicho, un placer :) ¡Mucha suerte con tu proyecto! el 7 feb. 2018 a las 10:16

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.