Get the image encoded in base64 (jsignature)

Question

Get the image encoded in base64 (jsignature)

Navigation

#1 by (3 votes)

2

I need to get the image with the signature made with the jSignature plugin, but when it comes to showing or getting the path / string / image encoded in base64, it does not work for me.

<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>

In this last line is where in theory I get the image encoded in base64, but it appears incomplete. There is a piece where it appears ... and there are missing letters / symbols. Since I show this route, I paste it in the browser and the image is not displayed (in the pathImageFirm is missing before "data:" since the program gives me the route without that piece.

I need to get the signature as a base64 encoded image.

javascript jquery html

asked by M. Giner 07.02.2018 в 09:06

source

1 answer

Send SMS Android Modify and save text files with PHP

score 3 · Accepted Answer

The problem you are experiencing is because the $(document).ready(...) block will be executed after the document is prepared and it is likely that the code jSignature("getData", "image") will be executed before the signature container is started.

<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>

When you press the button, the correctly encoded image in base64 will appear in console and a copy will be made in an additional image to show you that it is correctly formed.