Guardar canva de un formulario Codeigniter

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

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();         });     });