0

Estoy intentando desarrollar una pequeña aplicación para la gestión de usuarios de una clínica, y me encuentro con un problema y es el siguiente. Esta clínica, tiene que hacer firmar a sus pacientes una hoja de papel, que es la ley de protección de datos en España y para ahorrar papel, tinta etc. La clínica me ha ofrecido desarrollar la aplicación y de paso pues la ley de protección de datos entre otras cosas poder firmarla de forma digital. Bien, hasta aquí mas o menos bien. Para la firma he desarrollado un pequeño recuadro con "canvas" de html5 y a este le he asignado un pequeño script de javascript, adjunto código más abajo. Pero ahora, interesa guardar esta firma de dicha persona en una base de datos o como archivo por separado en el hosting... Y mi pregunta es, como puedo hacer esta parte?? he estado leyendo de que se puede hacer con esta función

canvas.toDataURL();

pero no lo consigo y no encuentro nada realmente util para mi. ¿Podéis echarme una mano? Gracias de ante mano.

Adjunto código hasta ahora.

1º HTML

<canvas id="canvas"> 
        Su navegador no soporta canvas
</canvas>

2º código JavaScript para el dibujo, y eventos de ratón para el canvas

<script type="text/javascript">
        var limpiar = document.getElementById("limpiar");
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var cw = canvas.width = 150, cx = cw / 2;
        var ch = canvas.height = 150, cy = ch / 2;

        var dibujar = false;
        var factorDeAlisamiento = 5;
        var trazados = [];
        var puntos = [];
        ctx.lineJoin = "round";


        limpiar.addEventListener('click', function(evt){
            dibujar = false;
            ctx.clearRect(0, 0, cw, ch);
            trazados.length = 0;
            puntos.length = 0;
        }, false);


        canvas.addEventListener('mousedown', function(evt) {
             dibujar = true;
             //ctx.clearRect(0, 0, cw, ch);
             ctx.beginPath();
        }, false);

        canvas.addEventListener('mouseup', function(evt) {
            dibujar = false;
        }, false);

        canvas.addEventListener("mouseout", function(evt) {
              dibujar = false;
        }, false);

        canvas.addEventListener("mousemove", function(evt) {
            if (dibujar) {
                var m = oMousePos(canvas, evt);
                puntos.push(m);
                ctx.lineTo(m.x, m.y);
                ctx.stroke();
              }
        }, false);

        function reducirArray(n,elArray) {
            var nuevoArray = [];
             nuevoArray[0] = elArray[0];
             for (var i = 0; i < elArray.length; i++) {
                if (i % n == 0) {
                  nuevoArray[nuevoArray.length] = elArray[i];
                }
              }
            nuevoArray[nuevoArray.length - 1] = elArray[elArray.length - 1];
            Trazados.push(nuevoArray);
        }

        function calcularPuntoDeControl(ry, a, b) {
            var pc = {}
            pc.x = (ry[a].x + ry[b].x) / 2;
            pc.y = (ry[a].y + ry[b].y) / 2;
            return pc;
        }

        function alisarTrazado(ry) {
            if (ry.length > 1) {
            var ultimoPunto = ry.length - 1;
            ctx.beginPath();
            ctx.moveTo(ry[0].x, ry[0].y);
            for (i = 1; i < ry.length - 2; i++) {
                var pc = calcularPuntoDeControl(ry, i, i + 1);
                ctx.quadraticCurveTo(ry[i].x, ry[i].y, pc.x, pc.y);
            }
            ctx.quadraticCurveTo(ry[ultimoPunto - 1].x, ry[ultimoPunto - 1].y, ry[ultimoPunto].x, ry[ultimoPunto].y);
            ctx.stroke();
              }
        }

        function redibujarTrazados(){
            dibujar = false;
            ctx.clearRect(0, 0, cw, ch);
            reducirArray(factorDeAlisamiento,puntos);
            for(var i = 0; i < Trazados.length; i++){
              alisarTrazado(Trazados[i]);
            }
        }

        function oMousePos(canvas, evt){
            var ClientRect = canvas.getBoundingClientRect();
            return { //objeto
                x: Math.round(evt.clientX - ClientRect.left),
                y: Math.round(evt.clientY - ClientRect.top)
              }
        }       
    </script>

3º código para intentar guardar el canvas en una imagen, como he leído por ahí

<script>
        function convertToImg(canvas){
            var image = canvas.toDataURL(); 
            var canvas = new Image();
            var convertir = document.getElementById("convertir").src = image;       
        //return canvas;    
        }

        convertir.addEventListener('click', function(evt){
            dibujar = false;
            ctx.clearRect(0, 0, cw, ch);
            trazados.length = 0;
            puntos.length = 0;
        }, false);
</script>

por último un botón que hace la llamada al script para convertir el canvas en imagen

<button id="convertir">Convertir</button>   

hasta aquí bien o al menos lo he conseguido, pero no consigo pasar el canvas a imagen y luego guardarla en un BD de MySQL o guardarla directamente en MySQL. ¿Que tipo de dato habría que usar en la BD para guardar este tipo de cosas?

Un saludo y gracias de antemano

2
  • Offtopic: Igual a la clínica le conviene repasar con un especialista de LOPD todo el circuito. Se me ocurre que, si procesas la firma por separado, un usuario cabreado puede decir "Yo puse mi firma en otro documento" y entonces ya tienes el problema montado. Por no hablar del riesgo de que alguien se descargue la firma y la use para otras cosas...
    – SJuan76
    Commented el 17 ago. 2017 a las 12:00
  • obviamos el tema de la clínica. Como se podría procesar esta firma ya que esta firma irá a una base de datos. Y ésta se podrá extraer de la base de datos. Se comprobará que el documento está firmado o no y cuales si.
    – scorpions
    Commented el 17 ago. 2017 a las 15:48

1 respuesta 1

0

Al final he terminado por desarrolar esta aplicación en Java donde si he podido crear un canvas y dibujar lo que quería, adjunto código:

public class Dibujo extends Canvas implements MouseListener, MouseMotionListener{

private ArrayList rectangulos = new ArrayList(); private ArrayList circulos = new ArrayList(); private ArrayList figuras = new ArrayList(); private Path2D figura; private int x,y; private BufferedImage imagenCanvas; public Color color; public int grosorLinea; public boolean manoAlzada = true, circulo = false, rectangulo = false;

Dibujo(){ //este setColor es mientras se pinta en que color se muestra this.setBackground(Color.WHITE); this.figura = new Path2D.Float(); grosorLinea = 3; }

@Override
public void paint(Graphics graficos){
    imagenCanvas = new BufferedImage(this.getWidth(), this.getHeight(), BufferedImage.TYPE_INT_BGR);
    super.paint(graficos);

    Graphics2D dibujar = (Graphics2D) graficos /*imagenCanvas.createGraphics()*/;
    //Este setColor es para la zona de dibujo
    dibujar.setColor(Color.WHITE);
    dibujar.fillRect(0, 0, this.getWidth(), this.getHeight());
    dibujar.setStroke(new BasicStroke(this.grosorLinea));
    // este setColor es para la línea
    dibujar.setColor(Color.BLACK);
    dibujar.draw(this.figura);

    super.paint(imagenCanvas.createGraphics());

    Graphics2D dibujo = imagenCanvas.createGraphics();
    //Este setColor es para la zona de dibujo
    dibujo.setColor(Color.WHITE);
    dibujo.fillRect(0, 0, this.getWidth(), this.getHeight());
    dibujo.setStroke(new BasicStroke(this.grosorLinea));
    // este setColor es para la línea
    dibujo.setColor(Color.BLACK);
    dibujo.draw(this.figura);

   try {
       ImageIO.write(imagenCanvas, "png", new File("firma.png"));
   } catch (IOException ex) {
       JOptionPane.showMessageDialog(null, "Imposible guardar la imagen de la firma");
   }
}

@Override
public void mouseClicked(MouseEvent e) {}

@Override
public void mousePressed(MouseEvent e) {
    figura.moveTo(e.getX(), e.getY());
}

@Override
public void mouseReleased(MouseEvent e) {

}

@Override
public void mouseEntered(MouseEvent e) {}

@Override
public void mouseExited(MouseEvent e) {}

@Override
public void mouseDragged(MouseEvent e) {
    //obtiene automáticamente las coordenadas del ratón.
    this.x = e.getX();
    this.y = e.getY();
    this.figura.lineTo(this.x, this.y);
    repaint();  
}


@Override
public void mouseMoved(MouseEvent e) {

}

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.