0

Hola estoy realizando un formulario que tiene un canva donde la persona pueda hacer su firma, me pidieron que esta firma se guarde en el servidor y en base de datos como ruta. No se como realizar este proceso y agradecería vuestra ayuda.

Vista :

<div class="img-centro">
    <img  class="" src="<?=base_url('img/').$img?>">
    <img class="right-move" src="<?=base_url('img/').$img2?>">
</div>
<hr>
<div class="loader"></div>

<div class="container ">

    <div class="row">
        <div class="tab-content">
            <div class="col-lg-2"></div>
            <div class="col-lg-8">
                <br>
                <br>
                <form id="form-registry-cliente" class="form-horizontal forla-whith" role="form" method="post" action="<?=base_url('empleado/insertar')?>">
                    <div class="form-group">
                        <label class="prueba1">Nombre y Apellido</label>
                        <div class="row">
                            <div class="col-md-4">
                                <input type="text" id="nombre" name="nombre" class="form-control formu-width"  autocomplete="off" placeholder="Nombre" value="<?php echo set_value('nombre')?>"/>
                                <?=form_error('nombre', '<div class=" same-input alert alert-danger">', '</div>'); ?>
                            </div>
                            <div class="col-md-4">
                                <input type="text" id="apellidos" name="apellidos" class="form-control formu-width"  autocomplete="off" placeholder="Apellido" value="<?php echo set_value('apellidos')?>"/>
                                <?=form_error('apellidos', '<div class="same-input alert alert-danger">', '</div>'); ?>
                            </div>
                        </div>
                    </div>
                    <div class="form-group prueba">
                        <label>E-mail</label>
                        <input type="text" id="email" name="email" autocomplete="off" class="form-control formu-width" placeholder="Correo Electrónico" value="<?php echo set_value('email')?>"/>
                        <?=form_error('email', '<div class="same-input alert alert-danger">', '</div>'); ?>
                    </div>
                    <div class="form-group prueba">
                        <label>Ciudad</label>
                        <input type="text" id="ciudad" name="ciudad" autocomplete="off" class="form-control formu-width" placeholder="Ciudad" value="<?php echo set_value('ciudad')?>"/>
                        <?=form_error('ciudad', '<div class="same-input alert alert-danger">', '</div>'); ?>
                    </div>
                        <input type="hidden" id="hotel" name="hotel" readonly class="form-control"  value="<?= $nmhotel ?>"/>
                    <div class="" >
                        <select name="ubicacion" id="ubicacion" class="" style=" visibility: hidden ">
                            <option value=""></option>
                            <option value="sintonia" <?php if ($localizacion =='sintonio'){?> selected<?php } ?>>Sintonia</option>
                            <option value="the-top_gallery_hotel" <?php if ($localizacion =='top_gallery'){?> selected<?php } ?>>The Top GH</option>
                            <option value="Matiz" <?php if ($localizacion =='Matiz'){?> selected<?php } ?>>Matiz</option>
                            <option value="the_top_molina_lario" <?php if ($localizacion =='top_molina'){?> selected<?php } ?>>The Top ML</option>
                            <option value="Salicornia" <?php if ($localizacion =='Salicornia'){?> selected<?php } ?>>Salicornia</option>
                            <option value="the_top_honucai" <?php if ($localizacion =='top_honucai'){?> selected<?php } ?>>The Top HH</option>
                        </select>
                    </div>
                    <div class="form-group prueba">
                        <label>Firma</label>
                    </div>
                    <div class="form-group prueba" >
                        <canvas id="signature"  width="405" height="150" style="border: 1px solid #ddd;"></canvas> <!-- signature-->
                        <br>
                        <a class="btn btn-primary " id="clear-signature">Limpiar Firma</a>
                    </div>

                    <div class="form-check prueba botton">
                        <input type="checkbox" class="form-check-input" name="terminos" id="terminos" value="acepta" data-toggle="modal">
                        <label class="form-check-label c-white" for="terminos">Acepto los términos y condiciones <span class="glyphicon glyphicon-asterisk"style="color: red"></span></label>
                        <?=form_error('terminos', '<div class="alert alert-danger same-input">', '</div>'); ?>
                    </div>
                    <input type="hidden" id="hotel" name="hotel" value="<?= $hotel ?>"/>

                    <div class="form-group ">
                        <a class="btn btn-info prueba2" href=<?php echo base_url('principal')?>> <strong> < </strong> Volver</a>
                        <button type="submit" name="submit" class="btn btn-success btn-derecha" value="registrar">Guardar</button>
                        <a class="btn btn-warning derecha prueba3" href=<?php echo base_url('exportacion')?>> Reporting</a>
                        <input type='hidden' name='imagen' id='imagen' />

                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal Condiciones -->
    <div class="modal fade" id="politicaprivacidad" tabindex="-1" role="dialog" aria-labelledby="aceptacion de condiciones" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h5 class="modal-title" id="exampleModalLongTitle" style="color: black;font-weight: normal;">Política de privacidad   <span style="color: black;font-weight: bold;"><?php echo $nmhotel ?></span></h5>
                </div>
                <div class="modal-body">
                    <p style="color: black;line-height:25px;text-justify: auto;font-size: 1.2rem"><?php echo $condiciones ?> <a href="https://<?= $url ?>"> <?= $url ?></a> </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    $(window).load(function(){
        $(".loader").fadeOut("slow");
        set_background();
     });

    function set_background(){
        var ubicacion = $('#ubicacion option:checked').val();
        var clase = '';

        switch (ubicacion){
            case 'sintonia':
                clase = 'gh-sintonia';
              break;
            case 'the-top_gallery_hotel':
                clase = 'gh-top';
              break;
            case 'Matiz':
                clase = 'molinala-matiz';
                break;
            case 'the_top_molina_lario':
                clase = 'molinala-top';
                break;
            case 'Salicornia':
                clase = 'hh-salicornia';
                break;
            case 'the_top_honucai':
                clase = 'hh-top';
                break;
            default:
                clase = 'gh-sintonia';
        }
        $('.container').addClass(clase);
    }

     jQuery(document).ready(function($){
         var canvas = document.getElementById("signature");
         var signaturePad = new SignaturePad(canvas);
         var dataURL = canvas.toDataURL();

        $('#clear-signature').on('click', function(){
            signaturePad.clear();
        });

   });

    $('input[type="checkbox"]').on('change', function(e) {
        if (e.target.checked) {
            $('#politicaprivacidad').modal();
        }
    });

    $.ajax({
        type:"POST";

    });

//    function saveImage() {
//        var canvasData = canvas.toDataURL("image/png");
//        var xmlHttpReq = false;
//        if (window.XMLHttpRequest) {
//            ajax = new XMLHttpRequest();
//        }
//        else if (window.ActiveXObject) {
//            ajax = new ActiveXObject("Microsoft.XMLHTTP");
//        }
//        ajax.open('POST', '<?//=base_url('empleado/insertar')?>//', false);
//        ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//        ajax.onreadystatechange = function() {
//            console.log(ajax.responseText);
//        };
//        ajax.send("imgData="+canvasData);
//    }

//    function saveCanva(){
//
//        var canvasData = canvas.toDataURL("image/png");
//        var ajax = new XMLHttpRequest();
//        ajax.open("POST",'<?//=base_url('empleado/insertar')?>//',false);
//        ajax.onreadystatechange = function(){
//            console.log(ajax.responseText);
//        };
//        ajax.setRequestHeader('Content-Type', 'application/upload');
//        ajax.send("imgData="+canvasData);
//    }
//    function guardar(){
//        var link = document.createElement('a');
//        link.download = "firma";
//
//        link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
//        link.click();
//    }
</script>

Jquery donde da las funciones al canva

  function UploadPic(){
    // generamos los datos de la imagen
    var pic = document.getElementById("signature").toDataURL("img/png");
    // quitamos la "cabecera" de la imagen pues no la necesitamos
    pic = pic.replace(/^data:img\/(png|jpg);base64,/, "");

    // Enviamos los datos de la imagen al servidor
    $.ajax({
        type: 'POST',
        url: base_url + 'Empleado/saveimage',
        data: {imageData: pic},
        dataType: 'json',
        success: function (msg) {
            console.log(msg);
            alert("Imagen almacenada.");
        }
    });
}

public function insertar()
    {
        $this->form_validation->set_rules('nombre','nombre','required');
        $this->form_validation->set_rules('apellidos','apellido','required');
        $this->form_validation->set_rules('email','email','required|valid_email');
        $this->form_validation->set_rules('ciudad','ciudad','required');
        $this->form_validation->set_rules('ubicacion','ubicación','required');
        $this->form_validation->set_rules('terminos','terminos','callback_terminos');


        $hotel = $this->session->userdata('hotel');
        $localizacion = $this->session->userdata('localizacion');


        if($this->form_validation->run()== FALSE){
            $datos['nombre']=set_value('nombre');
            $datos['apellidos']=set_value('apellidos');
            $datos['email']=set_value('email');
            $datos['ciudad']=set_value('ciudad');
            $datos['ubicacion']=set_value('ubicacion');
            $datos['terminos']=set_value('terminos');


            switch($hotel) {
                case 'barcelona':
                    $img='gh-head-logo.png';
                    $nmhotel='Gallery Hoteles';
                    break;
                case 'malaga':
                    $img='ml-head-logo.png';
                    $nmhotel='Hotel Molina Lario';
                    break;
                case 'mallorca':
                    $img='hh-head-logo.jpeg';
                    $nmhotel='Hotel Honucai';
                    break;
                default:
                    $img='hh-head-logo.png';
                    $nmhotel='';
            }

            switch($localizacion){
                case 'sintonio':
                    $img2 = 'gh-modal.png';
                    $condiciones = 'En cumplimiento del Reglamento Europeo 2016/679 del 27 de abril en materia de Protección de Datos de Carácter Personal, presta su consentimiento a que GALLERY CENTER, S.L. recoja y trate sus datos personales con el fin de mantenerle informado, incluso por medios telemáticos, de servicios y ofertas propios de la empresa.
                                    El suministro de sus datos es voluntario, siendo la base jurídica para su tratamiento el consentimiento prestado. 
                                    Únicamente tendrán acceso a sus datos terceros con los que medie obligación legal o contractual para la prestación de servicios técnicos, entre otros.
                                    Podrá ejercitar sus derechos de acceso, rectificación, supresión, oposición y portabilidad, así como que se limite el tratamiento de sus datos, poniéndose en contacto con GALLERY CENTER, S.L por escrito (C/ Rosselló 249, 08008 Barcelona) o por e-mail ([email protected]).
                                    Para más información consulte nuestra política de protección de datos disponible en recepción o en la web';
                    $url ='www.galleryhotel.com/es/aviso-legal';
                    break;
                case 'top_gallery':
                    $img2 = 'modal-top-gh.png';
                    $condiciones = 'En cumplimiento del Reglamento Europeo 2016/679 del 27 de abril en materia de Protección de Datos de Carácter Personal, presta su consentimiento a que GALLERY CENTER, S.L. recoja y trate sus datos personales con el fin de mantenerle informado, incluso por medios telemáticos, de servicios y ofertas propios de la empresa.
                                    El suministro de sus datos es voluntario, siendo la base jurídica para su tratamiento el consentimiento prestado. 
                                    Únicamente tendrán acceso a sus datos terceros con los que medie obligación legal o contractual para la prestación de servicios técnicos, entre otros.
                                    Podrá ejercitar sus derechos de acceso, rectificación, supresión, oposición y portabilidad, así como que se limite el tratamiento de sus datos, poniéndose en contacto con GALLERY CENTER, S.L por escrito (C/ Rosselló 249, 08008 Barcelona) o por e-mail ([email protected]).
                                    Para más información consulte nuestra política de protección de datos disponible en recepción o en la web';
                    $url ='www.galleryhotel.com/es/aviso-legal';
                    break;
                case 'Matiz':
                    $img2 = 'modal-resta-ml.png';
                    $condiciones = 'En cumplimiento del Reglamento Europeo 2016/679 del 27 de abril en materia de Protección de Datos de Carácter Personal, presta su consentimiento a que GALLERY CENTER, S.L. recoja y trate sus datos personales con el fin de mantenerle informado, incluso por medios telemáticos, de servicios y ofertas propios de la empresa.
                                    El suministro de sus datos es voluntario, siendo la base jurídica para su tratamiento el consentimiento prestado. 
                                    Únicamente tendrán acceso a sus datos terceros con los que medie obligación legal o contractual para la prestación de servicios técnicos, entre otros.
                                    Podrá ejercitar sus derechos de acceso, rectificación, supresión, oposición y portabilidad, así como que se limite el tratamiento de sus datos, poniéndose en contacto con GALLERY CENTER, S.L por escrito (C/ Rosselló 249, 08008 Barcelona) o por e-mail ([email protected]).
                                    Para más información consulte nuestra política de protección de datos disponible en recepción o en la web';
                    $url ='www.galleryhotel.com/es/aviso-legal';
                    break;
                case 'top_molina':
                    $img2 = 'modal-top-ml.png';
                    $condiciones = 'En cumplimiento del Reglamento Europeo 2016/679 del 27 de abril en materia de Protección de Datos de Carácter Personal, presta su consentimiento a que GALLERY CENTER, S.L. recoja y trate sus datos personales con el fin de mantenerle informado, incluso por medios telemáticos, de servicios y ofertas propios de la empresa.
                                    El suministro de sus datos es voluntario, siendo la base jurídica para su tratamiento el consentimiento prestado. 
                                    Únicamente tendrán acceso a sus datos terceros con los que medie obligación legal o contractual para la prestación de servicios técnicos, entre otros.
                                    Podrá ejercitar sus derechos de acceso, rectificación, supresión, oposición y portabilidad, así como que se limite el tratamiento de sus datos, poniéndose en contacto con GALLERY CENTER, S.L por escrito (C/ Rosselló 249, 08008 Barcelona) o por e-mail ([email protected]).
                                    Para más información consulte nuestra política de protección de datos disponible en recepción o en la web';
                    $url ='www.galleryhotel.com/es/aviso-legal';
                    break;
                case 'Salicornia':
                    $img2 = 'salicor-resta.png';
                    $condiciones = 'En cumplimiento del Reglamento Europeo 2016/679 del 27 de abril en materia de Protección de Datos de Carácter Personal, presta su consentimiento a que PORT COLONIA, S.L.U. recoja y trate sus datos personales con el fin de mantenerle informado, incluso por medios telemáticos, de servicios y ofertas propios de la empresa.
                                    El suministro de sus datos es voluntario, siendo la base jurídica para su tratamiento el consentimiento prestado. 
                                    Asimismo, nos autoriza a que sus datos personales sean cedidos a la empresa del grupo GALLERY CENTER, S.L. (C/ Rosselló 249, 08008 Barcelona), con idénticas finalidades.
                                    Adicionalmente, únicamente tendrán acceso a sus datos terceros con los que medie obligación legal o contractual para la prestación de servicios técnicos, entre otros.
                                    Podrá ejercitar sus derechos de acceso, rectificación, supresión, oposición y portabilidad, así como que se limite el tratamiento de sus datos, poniéndose en contacto con PORT COLONIA, S.L.U. por escrito (C/ Gabriel Roca s/n, 07638, Colonia de Sant Jordi, Mallorca - Illes Balears) o por e-mail a [email protected].
                                    Para más información consulte nuestra política de protección de datos disponible en recepción o en la web';
                    $url ='www.hotelhonucai.com/aviso-legal';
                    break;
                case 'top_honucai';
                    $img2 = 'modal-top-honu.png';
                    $condiciones = 'En cumplimiento del Reglamento Europeo 2016/679 del 27 de abril en materia de Protección de Datos de Carácter Personal, presta su consentimiento a que PORT COLONIA, S.L.U. recoja y trate sus datos personales con el fin de mantenerle informado, incluso por medios telemáticos, de servicios y ofertas propios de la empresa.
                                    El suministro de sus datos es voluntario, siendo la base jurídica para su tratamiento el consentimiento prestado. 
                                    Asimismo, nos autoriza a que sus datos personales sean cedidos a la empresa del grupo GALLERY CENTER, S.L. (C/ Rosselló 249, 08008 Barcelona), con idénticas finalidades.
                                    Adicionalmente, únicamente tendrán acceso a sus datos terceros con los que medie obligación legal o contractual para la prestación de servicios técnicos, entre otros.
                                    Podrá ejercitar sus derechos de acceso, rectificación, supresión, oposición y portabilidad, así como que se limite el tratamiento de sus datos, poniéndose en contacto con PORT COLONIA, S.L.U. por escrito (C/ Gabriel Roca s/n, 07638, Colonia de Sant Jordi, Mallorca - Illes Balears) o por e-mail a [email protected].
                                    Para más información consulte nuestra política de protección de datos disponible en recepción o en la web';
                    $url ='www.hotelhonucai.com/aviso-legal';
                    break;
                default:
                    $img2 = 'gh-modal.png';
                    $condiciones = 'En cumplimiento del Reglamento Europeo 2016/679 del 27 de abril en materia de Protección de Datos de Carácter Personal, presta su consentimiento a que GALLERY CENTER, S.L. recoja y trate sus datos personales con el fin de mantenerle informado, incluso por medios telemáticos, de servicios y ofertas propios de la empresa.
                                    El suministro de sus datos es voluntario, siendo la base jurídica para su tratamiento el consentimiento prestado. 
                                    Únicamente tendrán acceso a sus datos terceros con los que medie obligación legal o contractual para la prestación de servicios técnicos, entre otros.
                                    Podrá ejercitar sus derechos de acceso, rectificación, supresión, oposición y portabilidad, así como que se limite el tratamiento de sus datos, poniéndose en contacto con GALLERY CENTER, S.L por escrito (C/ Rosselló 249, 08008 Barcelona) o por e-mail ([email protected]).
                                    Para más información consulte nuestra política de protección de datos disponible en recepción o en la web';
                    $url ='www.galleryhotel.com/es/aviso-legal';
            }

            $data['title']='Gallery Hoteles';
            $data['img']=$img;
            $data['nmhotel']=$nmhotel;
            $data['hotel']= $hotel;
            $data['img2']= $img2;
            $data['localizacion']= $localizacion;
            $data['condiciones']= $condiciones;
            $data['url']= $url;
            $this->load->view('comun/header',$data);
            $this->load->view('formulario/formu_views',$datos,$data);
            $this->load->view('comun/footer',$data);

        }else{
            $firma= str_replace(" ", "_", $this->input->post('nombre')).'_'.str_replace(" ", "_", $this->input->post('apellidos')).'_'.date('Y-m-d-H:i:s').'.png';
            $data = array(
                'nombre' =>$this->input->post('nombre'),
                'apellidos'=>$this->input->post('apellidos'),
                'email'=> $this->input->post('email'),
                'ciudad'=> $this->input->post('ciudad'),
                'fecha'=> date('Y-m-d  H:i:s'),
                'condiciones'=> 1,
                'firma'=>$firma,
                'ubicacion'=>$this->input->post('ubicacion'),
                'hotel'=>$this->input->post('hotel')
            );
            /* MAILCHIMP */

            $list_id = '0f61ec2abc';//EL HOTEL DEBERA PONER EL LIST ID DONDE GUARDARA LOS MAILS AL IGUAL QUE EM EL CONFIG LINEA 525
            $MailChimp = new MailChimp('APIKEY-us12');
            if (strtoupper(substr(PHP_OS, 0, 3)) === 'WIN') {
                $this->mailchimp->verify_ssl = false;
            }
            $result = $this->mailchimp->post("lists/$list_id/members", [
                'email_address' => $this->input->post('email'),
                'merge_fields'  => [
                    'FNAME' =>$this->input->post('nombre'),
                    'LNAME'=>$this->input->post('apellidos'),
                    'CIUDAD'=>$this->input->post('ciudad'),
                    'UBICACION'=>$this->input->post('ubicacion'),
                    'NMHOTEL'=>$this->input->post('hotel'),
                ],
                    'status'=> 'subscribed',
            ]);

            $parametros = $_REQUEST;

            if ($parametros['imageData']) {
                $imgData = base64_decode($parametros['imageData']);
                $uniqid = uniqid();

                $imageFilePath = 'myImage_' . $uniqid . '.png';
                // Borro la imagen por si ya existía
                if (file_exists($imageFilePath)) {
                    unlink($imageFilePath);
                }
                // Escribo los datos en disco
                $file = fopen($imageFilePath, 'w');
                fclose($file);
            }

            $this->empleado_model->insertar($data);
            $this->session->set_flashdata('hotel',$hotel);
            redirect('empleado');
        }
Codigo donde llama al ajax lo he puesto en una funcion donde inserta los datos en base de datos por que quiero que al momento que se a guardar se inserte los datos y a la vez de guardo en la carpeta que tengo en el servidor. Si hay algo que esta mal decidme porfavor. Gracias

1 respuesta 1

0

Un ejemplo de como almacenar el canvas en disco podría ser así:

JAVASCRIPT (en la pagina del formulario):

function UploadPic() {
    // generamos los datos de la imagen
    var pic = document.getElementById("fondoCanvas").toDataURL("image/png");
    // quitamos la "cabecera" de la imagen pues no la necesitamos
    pic = pic.replace(/^data:image\/(png|jpg);base64,/, "")

    // Enviamos los datos de la imagen al servidor
    $.ajax({
        type: 'POST',
        url: 'guarda_imagen.php',
        data: {imageData: pic},
        dataType: 'json',
        success: function (msg) {
            console.log(msg);
            alert("Imagen almacenada.");
        }
    });
}

La imagen de la firma está en un contenedor con id="fondoCanvas", uso el método .toDataURL() para obtener la imagen codificada en base64.

PHP (recibe los datos del ajax y almacena la imagen):

<?php
$parametros = $_REQUEST;

if ($parametros['imageData']) {
    $imgData = base64_decode($parametros['imageData']);

    $uniqid = uniqid();
    $imageFilePath = 'myImage_' . $uniqid . '.png';

    // Borro la imagen por si ya existía
    if (file_exists($imageFilePath)) {
        unlink($imageFilePath);
    }

    // Escribo los datos en disco
    $file = fopen($imageFilePath, 'w');
    fclose($file);
} 

Decodificamos la imagen y la almacenamos en el servidor, aquí se establecería el nombre y la ruta, que después se podría almacenar en base de datos.

En este ejemplo solo se envían los datos de la imagen, pero se podría enviar el resto de campos necesarios de un formulario.

Enviar los datos por ajax es una opción, se podría enviar un formulario POST normal, para lo cual bastaría con enviar los datos de la imagen mediante un campo hidden.

4
  • Muchas gracias,tengo una duda en la url del ajax pondría el controlador, ya que estoy trabajando con codeigniter.Es correcto o no?.Gracias nuevamente.
    – Pag
    Commented el 21 mar. 2019 a las 10:08
  • No me ha funcionado, algo debo estar haciendo mal
    – Pag
    Commented el 21 mar. 2019 a las 10:53
  • Edita la pregunta añadiendo la nueva información o abre otra pregunta si el problema es diferente.
    – Fly
    Commented el 21 mar. 2019 a las 11:33
  • Listo, he puesto todo el codigo de la funcion insertar del controlador porque en el else hace la inserción en la database. Mil gracias.
    – Pag
    Commented el 21 mar. 2019 a las 11:39

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.