0

Estoy intentnado guardar el contenido de un canvas html5 de un modal a otro un poco más pequeño, esto es para hacer un panel de firma digital de documentos por medio de una tableta de firmas. tengo un primer canvas que al hacer click en el despliega un modal en el cual tengo otro canvas más grande para poder firmar mejor. Este dibujo, me gustaría poder hacer que al hacer click en guardar, se cierre el modal, pero ese dibujo se muestre en mi otro modal, con su tamaño adecuado. Estaba pensando en guardar el contenido de el primer canvas y posteriormente cargar la imagen en el otro canvas, pero no se si es la mejor opción... También pensé en guardar la imagen, guardar la ruta en la DB y posteriormente cargar el contenido de la imagen por medio de ajax, tampoco se si es la mejor opción. Lo que me gustaría es que al guardar el canvas grande, se cierre el modal y se muestre el contenido en el otro canvas y una vez se envíe el formulario, se guarde la imagen y la ruta en la DB. Para el back estoy trabajando con Laravel 7.

Con este código muestro el modal y puedo dibujar, a parte borrar el contenido, y me gustaría hacer lo que comento:

$("#canvas").on("click", function(){
    $("#myModal").modal('show');
    
    // could be 3d, if you want to make a video game
    canvas.width = window.innerWidth;
    canvas.height = 500;

    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#ac0000';

    let isDrawing = false;
    let lastX = 0;
    let lastY = 0;

    function draw(e) {
        if(!isDrawing) return;
        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.stroke();
        [lastX, lastY] = [e.offsetX, e.offsetY];
    }

    canvas.addEventListener('mousedown', (e) => {
        isDrawing = true;
        [lastX, lastY] = [e.offsetX, e.offsetY];
    });

    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseup', () => isDrawing = false);
    canvas.addEventListener('mouseout', () => isDrawing = false);   
});

$("#borrarCanvas").on('click', function(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
});

1 respuesta 1

0

Al final he podido resolverlo de esta manera:

$("#guardar").on('click', function(){
        var image = canvas.toDataURL("image/png");
        var nombrePaciente = $("#nombre").val();
        var apellidosPaciente = $("#apellidos").val();

        $.ajax({
            type: 'POST',
            url: 'guardarFirma',
            data:{imgBase64: image, 'nombre': nombrePaciente, 'apellidos': apellidosPaciente},
            success: function(response){
                $("#myModal").modal('hide');

                var canvas = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                // load image from data url
                var imageObj = new Image();
                imageObj.onload = function() {
                    context.drawImage(imageObj, 100, 0, canvas.width, canvas.height);
                };

                imageObj.src = image;
            },
            error: function(xhr){
                var data = xhr.responseJSON;
                console.log(data);
            }
        });
    });

Con este código, obtengo el contenido del canvas nombre y apellidos del cliente, y lo envío al controlador por ajax. Si todo ha ido bien obtengo el canvas donde quiero portar la imagen y seteo la imagen con imageObj.onload eso llama a la función drawImage() a la cual se le pasa la imagen, la posición donde queremos mostrar el contenido el ancho y alto del canvas para que quede centrado y seteamos el src de la imagen con image.

Por otro lado en el controlador, con Image Magick creo una imagen y por medio de storage::disk guardo la imagen dentro de la carpeta storage de mi aplicación.

Con mi modelo creo una nueva entrada en la DB y todo ya se guarda como quería.

public function guardarFirma(Request $request, $firma = null, $userID = null, $userName = null, $userLastName = null, $fecha = null)
    {
        $image = Image::make($request->get('imgBase64'))->resize(400, 400)->encode('png');
        $nombre = $request->get('nombre');
        $apellidos = $request->get('apellidos');

        $save = Storage::disk('images')->put($userID.$nombre.$apellidos.".png", $image);

        //obtenemos la fecha de firma
        $fecha = \Carbon\Carbon::now();
        $fechaFinal = $fecha->toDateString();

        $data = [
            "paciente_id"    => $userID,
            "fechaFirma"     => $fechaFinal,
            "firma"          => $userID.$nombre.$apellidos.".png",
        ];

        Lopd::create($data);

        if($save){
            return true;
        }else{
            return false;
        }

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.