Skip to main content
Revertido a la revisión 4
Origen Enlace
Cris223511.dev
  • 9.3k
  • 4
  • 7
  • 31

HTML

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

JS

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>
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");
}

 

HTML

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

JS

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");
}

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>
 

Revertido a la revisión 3
Origen Enlace
Cris223511.dev
  • 9.3k
  • 4
  • 7
  • 31
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>
HTML

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

JS

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");
}

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>

 
HTML

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

JS

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");
}

se añadieron 202 caracteres en el cuerpo
Origen Enlace
Yussef
  • 23.4k
  • 4
  • 12
  • 29

HTML

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

JS

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>
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");
}

 

HTML

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

JS

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");
}

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>
 

se añadieron 714 caracteres en el cuerpo
Origen Enlace
Loading
se añadieron 17 caracteres en el cuerpo
Origen Enlace
Cris223511.dev
  • 9.3k
  • 4
  • 7
  • 31
Loading
Origen Enlace
Loading