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">×</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');
}