none
Dibujar firma RRS feed

  • Pregunta

  • Buenas tardes, ayer empece un hilo para ver como podía dibujar una firma sobre un documento PDF. Leandro me dijo que podría dibujar sobre un canvas con HTML5 y así lo he hecho.

            <script type="text/javascript">
            // Variables para contener los sucesivos puntos (x,y) por los que va pasando el ratón, y su estado (pulsado/no pulsado)
            var movimientos = new Array();
            var pulsado;
            function crearLienzo() {
                //Aquí es donde vamos a insertar el código javascript para crear el lienzo
                var canvasDiv = document.getElementById('contenido-firma');
                canvas = document.createElement('canvas');
                canvas.setAttribute('width', 800);
                canvas.setAttribute('height', 1200);
                canvas.setAttribute('id', 'canvas');
                canvasDiv.appendChild(canvas);
                if (typeof G_vmlCanvasManager != 'undefined') {
                    canvas = G_vmlCanvasManager.initElement(canvas);
                }
                context = canvas.getContext("2d");
               // context.drawImage('../images/15500.jpg', 0, 0);
                $('#canvas').mousedown(function(e){
                    pulsado = true;
                    movimientos.push([e.pageX - this.offsetLeft,
                        e.pageY - this.offsetTop,
                        false]);
                    repinta();
                });
    
                $('#canvas').bind('touchstart', function (event) {
                    var e = event.originalEvent;
                    e.preventDefault();
                    pulsado = true;
                    movimientos.push([e.targetTouches[0].pageX - this.offsetLeft,
                        e.targetTouches[0].pageY - this.offsetTop,
                        false]);
                    repinta();
                });
     
                $('#canvas').mousemove(function(e){
                    if(pulsado){
                        movimientos.push([e.pageX - this.offsetLeft,
                            e.pageY - this.offsetTop,
                            true]);
                        repinta();
                    }
                });
     
                $('#canvas').mouseup(function(e){
                    pulsado = false;
                });
     
                $('#canvas').mouseleave(function(e){
                    pulsado = false;
                });
                repinta();
            }
             function repinta() {
                // función para dibujar en el lienzo los movimientos del ratón que hemos recogido en la variable "movimientos"
                 canvas.width = canvas.width; // Limpia el lienzo
    
                 context.strokeStyle = "#0000a0";
                 context.lineJoin = "round";
                 context.lineWidth = 1;
             //    context.drawImage('images/15500.jpg',0,0);
    
                 for (var i = 0; i < movimientos.length; i++) {
                     context.beginPath();
                     if (movimientos[i][2] && i) {
                         context.moveTo(movimientos[i - 1][0], movimientos[i - 1][1]);
                     } else {
                         context.moveTo(movimientos[i][0], movimientos[i][1]);
                     }
                     context.lineTo(movimientos[i][0], movimientos[i][1]);
                     context.closePath();
                     context.stroke();
                 }
             }
    </script>

    Luego en el body...

    <body OnLoad = crearLienzo()>
     <div id="contenido-firma" class ="contenido-firma"></div>
    </body>

    la clase contenido-firma...

    .contenido-firma {
        width:800px;
        height:1200px;
    }

    Con esto ya consigo dibujar con el ratón.

    Mi pregunta es si alguien puede orientarme a ver como puedo coger la firma y el documento y hacer un jpg con ellos dos. Por ejemplo con una imagen puedo poner la firma en la imagen mediante las clases bitmap y Graphics. Puedo hacer esto con un documento PDF????

    saludos,

    Alvaro.

    jueves, 28 de enero de 2016 15:06

Todas las respuestas