0

estoy usando un plugin de jquery para capturar una firma, el plugin es el siguiente: https://www.aspsnippets.com/questions/183525/Save-digital-signature-in-Database-and-display-in-ASPNet-GridView-using-C-and-VBNet/

En las computadoras funciona bien pero cuando paso a un móvil sucede que al momento de que la persona esta poniendo la firma y separa su dedo de la pantalla y vuelve a hacer algún trazo se pierde lo que anteriormente se tenia, como comento eso solo pasa en el celular, ¿saben cómo podría solucionarlo?, de antemano gracias, DTB.

            $(function () {
                $('#colors_sketch').sketch();
                $('#borrar').bind("click", function () {
                    var canvas = document.getElementById('colors_sketch');
                    var context = canvas.getContext('2d');
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    $('#colors_sketch').sketch('actions', []);
                   
                });
            });
<script src="https://cdn.rawgit.com/mobomo/sketch.js/master/lib/sketch.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="tools">
                                <a href="#colors_sketch" id="borrar" data-clear='true' class="btn btn-primary btn-sm">Borrar <i class="fas fa-eraser"></i></a>
                            </div>
                            <br />
                            <canvas id="colors_sketch" style="border: 1px solid #ccc; width: 100%; height: 200px;"></canvas>

1 respuesta 1

0

no conozco la librería pero te puedo recomendar drawingboard.js ya que llevo bastantes años utilizándola y bastante fácil de usar, además de muy personalizable, te comparto un codepen con un ejemplo.

$(document).ready(function() {
  var customBoard2 = new DrawingBoard.Board("custom-board-2", {
    controls: [
      "Color",
      {
        Size: {
          type: "dropdown"
        }
      },
      {
        DrawingMode: {
          filler: false
        }
      },
      "Navigation",
      "Download"
    ],
    size: 1,
    webStorage: "local",
    enlargeYourContainer: true
  });

  $("#logImgBtn").click(function(e) {
    console.log(localStorage.getItem("drawing-board-custom-board-2"));
  });
});
​
/* drawingboard.js v0.4.6 - https://github.com/Leimi/drawingboard.js
* Copyright (c) 2015 Emmanuel Pelletier
* Licensed MIT */

.drawing-board,
.drawing-board * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box
}

.drawing-board-controls-hidden,
.drawing-board-utils-hidden {
  display: none!important
}

.drawing-board {
  position: relative;
  display: block
}

.drawing-board-canvas-wrapper {
  position: relative;
  margin: 0;
  border: 1px solid #ddd
}

.drawing-board-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  cursor: crosshair;
  z-index: 20
}

.drawing-board-cursor {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  border-radius: 50%;
  background: #ccc;
  background: rgba(0, 0, 0, .2);
  z-index: 30
}

.drawing-board-control-colors-rainbows,
.drawing-board-control-size .drawing-board-control-inner,
.drawing-board-control-size-dropdown,
.drawing-board-control>button {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #eee;
  padding: 2px 4px;
  border: 1px solid #ccc;
  box-shadow: 0 1px 3px -2px #121212, inset 0 2px 5px 0 rgba(255, 255, 255, .3);
  -webkit-box-shadow: 0 1px 3px -2px #121212, inset 0 2px 5px 0 rgba(255, 255, 255, .3);
  height: 28px
}

.drawing-board-control>button {
  cursor: pointer;
  min-width: 28px;
  line-height: 14px
}

.drawing-board-control>button:focus,
.drawing-board-control>button:hover {
  background-color: #ddd
}

.drawing-board-control>button.active,
.drawing-board-control>button:active {
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, .2);
  -webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, .2);
  background-color: #ddd
}

.drawing-board-control>button[disabled] {
  color: gray
}

.drawing-board-control>button[disabled].active,
.drawing-board-control>button[disabled]:active,
.drawing-board-control>button[disabled]:focus,
.drawing-board-control>button[disabled]:hover {
  background-color: #eee;
  box-shadow: 0 1px 3px -2px #121212, inset 0 2px 5px 0 rgba(255, 255, 255, .3);
  -webkit-box-shadow: 0 1px 3px -2px #121212, inset 0 2px 5px 0 rgba(255, 255, 255, .3);
  cursor: default
}

.drawing-board-controls {
  margin: 0 auto;
  text-align: center;
  font-size: 0;
  display: table;
  border-spacing: 9.33px 0;
  position: relative;
  min-height: 28px
}

.drawing-board-controls[data-align=left] {
  margin: 0;
  left: -9.33px
}

.drawing-board-controls[data-align=right] {
  margin: 0 0 0 auto;
  right: -9.33px
}

.drawing-board-canvas-wrapper+.drawing-board-controls,
.drawing-board-controls+.drawing-board-canvas-wrapper {
  margin-top: 5px
}

.drawing-board-controls-hidden {
  height: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0
}

.drawing-board-control {
  display: table-cell;
  border-collapse: separate;
  vertical-align: middle;
  font-size: 16px;
  height: 100%
}

.drawing-board-control-inner {
  position: relative;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

.drawing-board-control>button {
  margin: 0;
  vertical-align: middle
}

.drawing-board-control-colors {
  font-size: 0;
  line-height: 0
}

.drawing-board-control-colors-current {
  border: 1px solid #ccc;
  cursor: pointer;
  display: inline-block;
  width: 26px;
  height: 26px
}

.drawing-board-control-colors-rainbows {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 33px;
  margin-left: 0;
  z-index: 100;
  width: 250px;
  height: auto;
  padding: 4px
}

.drawing-board-control-colors-rainbow {
  height: 18px
}

.drawing-board-control-colors-picker:first-child {
  margin-right: 5px
}

.drawing-board-control-colors-picker {
  display: inline-block;
  width: 18px;
  height: 18px;
  cursor: pointer
}

.drawing-board-control-colors-picker[data-color="rgba(255, 255, 255, 1)"] {
  width: 16px;
  height: 17px;
  border: 1px solid #ccc;
  border-bottom: none
}

.drawing-board-control-colors-picker:hover {
  width: 16px;
  height: 16px;
  border: 1px solid #555
}

.drawing-board-control-drawingmode>button {
  margin-right: 2px
}

.drawing-board-control-drawingmode>button:last-child {
  margin-right: 0
}

.drawing-board-control-drawingmode-pencil-button {
  overflow: hidden;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAe9JREFUeNpiZAACVlFRBhYREQZcQPnbNwa3N28YlL5+ZfgLFfvPwGD9m4FhIgsDHuAO0gTUDNKIBvyBmqt/MTDMY8Gl0f31azD7L6oUIxCnAzWmAPHBfwwM01AMUAV6JfPQIVwOYgVqqPnFyOjz6///O38YGKpAgmAD1OXlGdTk5PD5hgeouZudj8/uy9evP/78/dsFFPsJNiAoKIiBABAHap4oLi9v8fTNm48//v7NBwbgWZgkE7rqt8DY+A8JZRBW+cfIuEDT0NDlzadP3z98/doPFDuCrB7TAGFhBqCNIGwM9OcKUzs7+xdv3355+f79VqDYAiTDwZgJh7ONgYpnOvn4GL949erT7UePdgL5JVCD4fgBLBBxaX74+PG789evnwby0/8jKXgExIeB+CG6Af///1e9Ki9vFSAkZPzoyZPPJy9evA9MB77/sWiEARZkzV+/fvXYtGnTpG3btj28EBT0BqjZ5D8OjXCwPksUhA1Wpggf/PHjx/9169Y9EBERaUlgZmaIAcrLE4rk5sIqBqDmlefnRPzfWGX5EaSZm5ubgRloADGA5QZ3RgK7gESY4PMNn9ZtObPpzZvfU4DiYkiB/RcHG+S7fyxAMH/lFU2GOZd2bLx18/cEUMoD4j9I+DcS/RtJHGTYf4AAAwAxaOMYHjxKFwAAAABJRU5ErkJggg==);
  background-position: 50% 50%;
  background-repeat: no-repeat
}

.drawing-board-control-drawingmode-pencil-button:before {
  content: "";
  display: block;
  width: 0;
  height: 100%
}

.drawing-board-control-drawingmode-eraser-button {
  overflow: hidden;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAkpJREFUeNp0kk+IElEcx39vFBc9+OfQRTAwzFt4CaYOKStj6MoeculStzoIQSB4kCVckmDx4iGCXWYJIqjoVOzO1l4qT1F7WfBWHvxzDPyTB3XUmXn93suRybUffHmP997n9/cRsFgwGARJkiAcDsPlwgEIeEZQAhCRAkgAlOD6SQP4rgMFDWVnYCAQgFgsBqFQCBwOByzZNQOotPHx1RNCCCipu6bfb+zSnslkeOQVILPrBkAirbws9btdTEWAzZPXpfepOzaeGMBXwe/3w3+MwTc3Dl+UeghTiskbBvR6Pbh18mZHB0jjmxvCKhIfR37s3r+Sevf8ca/T4TBF2HTSODuDxP7uNjrZFFbBk8lEzOVyspa4ykGYw2zfbTb/7ilvok1YhlVVFfP5vDydTkHXdXDdlhZOOnPY4/HA0YPtp3h6LFjh8XgsFgoFGTPgsKm1zDr8ajTQh8Fh5eGjZzjGI8yjKlgjF4tFGdd/YKYmRja24hw+zu3sYe2HiH3hYzQjl8tleTQanWtou93G6Qngdrth6+1+9h6hTULJZ/PeziJXKhV5OByeg1ut1gJOp9NZTdNOcQ419ot+ggp1qoLdBFmqVmNpm3A8Huewy+Wq1RH8QH9zmBlJJpMRdCIqiiIPBgN+2MCGsW/r8/kgGo1m0fmpzWarseayHlmNeL1eFiWC0cRqtSr3+/3FpSiKHMZtjU1glbFyfKgLTqfzEka9OJvNeDnzz1JnCaFmqOl8ZdJY1SiDOXCiXKg1NtG5DIt0y6ov3dE/AgwAENFWYYLj4mYAAAAASUVORK5CYII=);
  background-position: 50% 50%;
  background-repeat: no-repeat
}

.drawing-board-control-drawingmode-eraser-button:before {
  content: "";
  display: block;
  width: 0;
  height: 100%
}

.drawing-board-control-drawingmode-filler-button {
  overflow: hidden;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAnNJREFUeNp0k0trE1EUx89MJpNJooYYXBgDNtCKdRPwlbqoCKUtaNVNA0Uo7UbMxoVPEARTXEi+QWfnwn6DEAlEkrSLttTGRiULEQlJ8yChmbzI++E50yTUJA78uMy953/u/557LmOz2WDEZ2m1WrckSRJSqdR2tVrdHQyYebwHtVoNuFHqTqczhQnWKaBYLDoKhcIuzgHDMKBSqeD20qd+LNdsNocSoFhRr9ctpVLJigl4xIIJQizLAmG4cAPa7bYcy9Iug5TL5UYikbD6/X7Rbre/IUcYe3WUW5ZsnQQzW9LpNOPz+UQc5aBM5mgdh7vI9FCCAesW2tnr9YqZTAby+bw8f3AQRP6853n+Ph5hemSCntjj8YjZbFYWx2IxeS2RSEMwuA87O79eqdXquVolK+GxnP0EPbHb7RZJSGABIR6PA11zJHKIR2MhHA5DIPDj7eH3j95KpfK60Wg8Yntil8slkqgnpioLghacTidoNDpEC3q9HnheCc3s1jZeLcW943pirPw/4lKpBkqlDubnl/riycnLsLy88EKj0fhzuRyZv8RFo1E6wpBYkiqy7Z54YmIcVlYeyOKC4mYwJ0nHRaQuM5vNT6hB/iceG7sIq6sPnwmC4MerDkby40AOCCoiddie1Wp92W7zQ2KTyQSLizNP8T0EsPLBbxEDnCj0GkM2qIEwyZRCobizsfH5A1ZXFhuN52F29vpz3HkL574mk8lj24Y5wsHkvjjoX0BOIWc5jruHzbK2ufmzEwpFO3jnDhQv4JoROYdoERVyGjEgZ8iBDlF3FzXo4go6utZ9lftY4N/dXisjR0i1G0ublv8KMAA0ZoUlicxrhwAAAABJRU5ErkJggg==);
  background-position: 50% 50%;
  background-repeat: no-repeat
}

.drawing-board-control-drawingmode-filler-button:before {
  content: "";
  display: block;
  width: 0;
  height: 100%
}

.drawing-board-control-navigation>button {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin-right: 2px
}

.drawing-board-control-navigation>button:last-child {
  margin-right: 0
}

.drawing-board-control-size[data-drawing-board-type=range] .drawing-board-control-inner {
  width: 75px
}

.drawing-board-control-size[data-drawing-board-type=dropdown] .drawing-board-control-inner {
  overflow: visible
}

.drawing-board-control-size-range-input {
  position: relative;
  width: 100%;
  z-index: 100;
  margin: 0;
  padding: 0;
  border: 0
}

.drawing-board-control-size-dropdown span,
.drawing-board-control-size-dropdown-current span,
.drawing-board-control-size-range-current {
  display: block;
  background: #333;
  opacity: .8
}

.drawing-board-control-size-range-current {
  display: inline-block;
  opacity: .15;
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: 50%;
  z-index: 50
}

.drawing-board-control-size-dropdown-current {
  display: block;
  height: 100%;
  width: 40px;
  overflow: hidden;
  position: relative
}

.drawing-board-control-size-dropdown-current span {
  position: absolute;
  left: 50%;
  top: 50%
}

.drawing-board-control-size-dropdown {
  position: absolute;
  left: -6px;
  top: 33px;
  height: auto;
  list-style-type: none;
  margin: 0;
  padding: 0;
  z-index: 100
}

.drawing-board-control-size-dropdown li {
  display: block;
  padding: 4px;
  margin: 3px 0;
  min-height: 16px
}

.drawing-board-control-size-dropdown li:hover {
  background: #ccc
}

.drawing-board-control-size-dropdown span {
  margin: 0 auto
}

.drawing-board-control-download-button {
  overflow: hidden;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAoBJREFUeNqMkr9PU1EUx7/vR1tQ3yu10hAmTawtBSYSy2YccFOcnDQm/gewOLnj5GYMg4sdXFxkMca4OBAwdUBe/ZkIGFp+9tHXvh/3/fTcAm01aLzJybnn3nM+95tzrnDl6Tb+sibuTmWUWj3C6/Juk+LySUmyvt0FCKKA02ryOCy6LBiu15ngMbZ5DDCNBqIw6gKM+n4nECUJru3glKry8CpjQaHVYmC2rVH82DIMMMdGGARdwJ+SPNdFS9chx+MXDNMp/NzagWNatk/nQU/hiYAoih6FYTBCBs9zUXMCbAhx2OYOv351lPOJ3EwH4LteL6Dcp/Rfu3FrstDyIizt+agpaYxNDU0M9gl4v7Ck+TYrCYLQqZHUyTtdQBiutPSGUflczSXHs5lVKwZdSOBMvwztxVvN0RtzsiyXBFHsAvL5PBSnCpXV2getILFiE2SjspYbuZzPiDSZ2vOXmlvX5yQqTmMfg9ZXqtls1wnT09OHEyAq0aFLg/gSXsSWq9wWk+p9PrCoYTwcijdLOfE7UsEufN9HGIYnT4EnTGIXe1KqtNNIvuNnGamxfi7SgQD/nIJCTbzOPQ/SQh1pud7T4M6W/8qFIw/5WAr5m7Ozsw9UVc069Fls2yJzSC5/lnc9RhaHZVnfSqUnEgXP2oBqtYqBgYG2+mKxmOVADnAcB4yxHgD1RzehKKns/LyV4gUHBweQy+UyRkdH6UKJ6fQDFxcXoWkaXJeRuTgUGCdLQJ9bx72lGZimGWs2m+083oN+2iiFQiGxvLy8RrDzudyltgrG3N8U2G8CrPz4sGYYRqJSqWR4H/jNWbJhUjAWi8XG8R/L87yPpGCVttVfAgwAVpZR+8tZC08AAAAASUVORK5CYII=);
  background-position: 50% 50%;
  background-repeat: no-repeat
}

.drawing-board-control-download-button:before {
  content: "";
  display: block;
  width: 0;
  height: 100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawingboard.js/0.4.6/drawingboard.min.js"></script>
<div id="custom-board-2" style="width: 500px; height: 200px;"></div>
<button id="logImgBtn">Log image</button>

https://codepen.io/romeroedward18/pen/YzjNwNr?editors=1111

https://leimi.github.io/drawingboard.js/?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library

2
  • El código de tu respuesta debe ir en la respuesta como texto y no en un enlace externo. El motivo? El enlace puede dejar de funcionar, dejando tu respuesta totalmente inservible. Haz clic en editar y cambia lo que haga falta. Saludos el 7 ene. 2023 a las 19:11
  • @MauricioContreras listo ya lo edito el 7 ene. 2023 a las 19:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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