Foros del Web » Programando para Internet » Javascript »

[APORTE] Mano alzada, canvas.

Estas en el tema de [APORTE] Mano alzada, canvas. en el foro de Javascript en Foros del Web. Hace algunos dias en uno de mis proyectos me pidieron crear un formulario que tras ser rellenado el cliente debía firmar a mano alzada en ...
  #1 (permalink)  
Antiguo 22/07/2016, 15:41
 
Fecha de Ingreso: octubre-2010
Ubicación: España
Mensajes: 1.007
Antigüedad: 9 años
Puntos: 123
Información [APORTE] Mano alzada, canvas.

Hace algunos dias en uno de mis proyectos me pidieron crear un formulario que tras ser rellenado el cliente debía firmar a mano alzada en la tablet o teléfono del operario.

Os dejo un ejemplo de esta parte donde poder dibujar a mano alzada por medio de un canvas, por si alguno os puede venir bien.


Es importante establecer los atributos width y height del canvas directamente y no hacerlo mediante css ya que no hacen referencia al estilo, si no al tamaño del lienzo. <canvas>.

Podeis copiar y pegar el ejemplo guardandolo como .php para verlo en funcionamiento.

Ejemplo:
Código Javascript:
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Ejemplo canvas mano alzada</title>
  7. <style type="text/css">
  8. .centrador{
  9.   box-sizing: border-box;
  10.   display: block;
  11.   width: 100%;
  12.   margin: 0 0 auto;
  13.   margin-top: 15px;
  14.   text-align: center;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19.  
  20. <div class='centrador'>
  21.   <canvas id='canvas' width="200" height="200" style='border: 1px solid #CCC;'>
  22.     <p>Tu navegador no soporta canvas</p>
  23.   </canvas>
  24. </div>
  25. <div class='centrador'>
  26.   <form id='formCanvas' method='post' action='#' ENCTYPE='multipart/form-data'>
  27.     <button type='button' onclick='LimpiarTrazado()'>Borrar</button>
  28.     <button type='button' onclick='GuardarTrazado()'>Guardar</button>
  29.     <input type='hidden' name='imagen' id='imagen' />
  30.   </form>
  31. </div>
  32.  
  33. <script type="text/javascript">
  34. /* Variables de Configuracion */
  35. var idCanvas='canvas';
  36. var idForm='formCanvas';
  37. var inputImagen='imagen';
  38. var estiloDelCursor='crosshair';
  39. var colorDelTrazo='#555';
  40. var colorDeFondo='#fff';
  41. var grosorDelTrazo=2;
  42.  
  43. /* Variables necesarias */
  44. var contexto=null;
  45. var valX=0;
  46. var valY=0;
  47. var flag=false;
  48. var imagen=document.getElementById(inputImagen);
  49. var anchoCanvas=document.getElementById(idCanvas).offsetWidth;
  50. var altoCanvas=document.getElementById(idCanvas).offsetHeight;
  51. var pizarraCanvas=document.getElementById(idCanvas);
  52.  
  53. /* Esperamos el evento load */
  54. window.addEventListener('load',IniciarDibujo,false);
  55.  
  56. function IniciarDibujo(){
  57.   /* Creamos la pizarra */
  58.   pizarraCanvas.style.cursor=estiloDelCursor;
  59.   contexto=pizarraCanvas.getContext('2d');
  60.   contexto.fillStyle=colorDeFondo;
  61.   contexto.fillRect(0,0,anchoCanvas,altoCanvas);
  62.   contexto.strokeStyle=colorDelTrazo;
  63.   contexto.lineWidth=grosorDelTrazo;
  64.   contexto.lineJoin='round';
  65.   contexto.lineCap='round';
  66.   /* Capturamos los diferentes eventos */
  67.   pizarraCanvas.addEventListener('mousedown',MouseDown,false);
  68.   pizarraCanvas.addEventListener('mouseup',MouseUp,false);
  69.   pizarraCanvas.addEventListener('mousemove',MouseMove,false);
  70.   pizarraCanvas.addEventListener('touchstart',TouchStart,false);
  71.   pizarraCanvas.addEventListener('touchmove',TouchMove,false);
  72.   pizarraCanvas.addEventListener('touchend',TouchEnd,false);
  73.   pizarraCanvas.addEventListener('touchleave',TouchEnd,false);
  74. }
  75.  
  76. function MouseDown(e){
  77.   flag=true;
  78.   contexto.beginPath();
  79.   valX=e.pageX-posicionX(pizarraCanvas); valY=e.pageY-posicionY(pizarraCanvas);
  80.   contexto.moveTo(valX,valY);
  81. }
  82.  
  83. function MouseUp(e){
  84.   contexto.closePath();
  85.   flag=false;
  86. }
  87.  
  88. function MouseMove(e){
  89.   if(flag){
  90.     contexto.beginPath();
  91.     contexto.moveTo(valX,valY);
  92.     valX=e.pageX-posicionX(pizarraCanvas); valY=e.pageY-posicionY(pizarraCanvas);
  93.     contexto.lineTo(valX,valY);
  94.     contexto.closePath();
  95.     contexto.stroke();
  96.   }
  97. }
  98.  
  99. function TouchMove(e){
  100.   e.preventDefault();
  101.   if (e.targetTouches.length == 1) {
  102.     var touch = e.targetTouches[0];
  103.     MouseMove(touch);
  104.   }
  105. }
  106.  
  107. function TouchStart(e){
  108.   if (e.targetTouches.length == 1) {
  109.     var touch = e.targetTouches[0];
  110.     MouseDown(touch);
  111.   }
  112. }
  113.  
  114. function TouchEnd(e){
  115.   if (e.targetTouches.length == 1) {
  116.     var touch = e.targetTouches[0];
  117.     MouseUp(touch);
  118.   }
  119. }
  120.  
  121. function posicionY(obj) {
  122.   var valor = obj.offsetTop;
  123.   if (obj.offsetParent) valor += posicionY(obj.offsetParent);
  124.   return valor;
  125. }
  126.  
  127. function posicionX(obj) {
  128.   var valor = obj.offsetLeft;
  129.   if (obj.offsetParent) valor += posicionX(obj.offsetParent);
  130.   return valor;
  131. }
  132.  
  133. /* Limpiar pizarra */
  134. function LimpiarTrazado(){
  135.   contexto=document.getElementById(idCanvas).getContext('2d');
  136.   contexto.fillStyle=colorDeFondo;
  137.   contexto.fillRect(0,0,anchoCanvas,altoCanvas);
  138. }
  139.  
  140. /* Enviar el trazado */
  141. function GuardarTrazado(){
  142.   imagen.value=document.getElementById(idCanvas).toDataURL('image/png');
  143.   document.forms[idForm].submit();
  144. }
  145. </script>
  146.  
  147.  
  148. <?php if (isset($_POST['imagen'])) { ?>
  149. <div class='centrador'>
  150.     <img src="<?php echo $_POST['imagen'];?>" border="1">
  151. </div>
  152. <?php } ?>
  153.  
  154. </body>
  155. </html>
__________________
Unset($vida['malRollo']);
  #2 (permalink)  
Antiguo 27/08/2018, 08:07
 
Fecha de Ingreso: enero-2008
Mensajes: 59
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: [APORTE] Mano alzada, canvas.

Hola, me parece un aporte super interesante, el tema es que con el código exacto no se me guarda la imagen, puede ser un tema de permisos? me falta algo?

gracias de antemano!

Etiquetas: canvas, dibujar, firma
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 18:59.