1

I am trying to insert the signature image data into the database and failed. I just found out how to pass the signature image into the folder in pc and i can see every image have different 'name.png' in the folder and i am thinking that the 'name.png' can be save in the database. I do not know how to make it successfully save into database.

This is my code of signature pad which i make it in a modal:

  <div class="row mb-4">
  <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Client 
   Signature</a>
  </div>
  </div>

  <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 
   aria-hidden="true">
   <div class="modal-dialog">
   <div class="modal-content">
   <div class="modal-header">
    <h4 class="modal-title" id="myModalLabel">Client Signature</h4>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="modal-body">
    <div id="signArea" >

    <h2 class="tag-ingo" style="font-size:30px;color:blue">Put signature below,</h2>

    <div class="typed" ></div>
   <p align="center">  
   <canvas class="sign-pad" id="sign-pad" width="300" height="100"></canvas></p>
   </div>

  </div>
  <div class="modal-footer">
  <button input="reset"  class="btn btn-secondary" >Reset</button>
  <button id="btnSaveSign" type="submit" name="submit" class="btn btn-primary">Submit</button>

This is the code that i save my signature image into a folder:

     <script>
        jQuery(document).ready(function() {
            Main.init();
            FormElements.init();
        });

        $(document).ready(function() {
            $('#signArea').signaturePad({drawOnly:true, drawBezierCurves:true, lineTop:90});
        });

        $("#btnSaveSign").click(function(e){
            html2canvas([document.getElementById('sign-pad')], {
                onrendered: function (canvas) {
                    var canvas_img_data = canvas.toDataURL('image/png');
                    var img_data = canvas_img_data.replace(/^data:image\/(png|jpg);base64,/, "");
                    //ajax call to save image inside folder
                    $.ajax({
                        url: 'save_sign.php',
                        data: { img_data:img_data },
                        type: 'post',
                        dataType: 'json',
                        success: function (response) {
                           window.location.reload();
                        }
                    });
                }
            });
        });
      </script>

This is the save-sign.php code:

<?php 

$result = array();
$imagedata = base64_decode($_POST['img_data']);
$filename = md5(date("dmYhisA"));
//Location to where you want to created sign image
$file_name = './doc_signs/'.$filename.'.png';
file_put_contents($file_name,$imagedata);
$result['status'] = 1;
$result['file_name'] = $file_name;
echo json_encode($result);
?>

And this is the code where i retrieve the image in the folder:

<img src="<?php echo $image; ?>" class="sign-preview" />

The database name is 'appointment, and the image data should be in 'imagename'

nur atiqa
  • 33
  • 1
  • 4
  • The Database Name ist Appointment, or the table Name? Do you have a database connected (like mysqli_connect) or do you need a solution from skratch? – chriss Apr 10 '20 at 09:07
  • How did you manage to generate unique name for each image file? Can that also be use as insert into table? Or maybe at least you can store it in a text file then use MySQL LOAD DATA INFILE and process the insertion from there? Just some thoughts – FanoFN Apr 10 '20 at 09:14
  • Im thinking to insert the image into database instead of into the folder in my pc. @chriss – nur atiqa Apr 10 '20 at 09:42
  • how can i insert the unique name into a database... @tcadidot0 – nur atiqa Apr 10 '20 at 09:43
  • Sorry @nuratiqa but I'm not familiar with php or jquery or how to insert image into mysql db. But I did a quick googling on 'how to insert image in mysql database using php' and there are a bunch of suggestions. You might want to try that and see which one can satisfy your condition. ;) – FanoFN Apr 11 '20 at 00:34
  • i did googling and try almost everything but failed. That is why i post this question here as this is the last choice i have to make..haha...but sokay thank you for replying btw -@tcadidot0 – nur atiqa Apr 11 '20 at 02:39
  • you can put your base64 image data into a table with VARCHAR type as let's say signature field, and the filename would be your primary key also of VARCHAR(32) type, I hope I got you right – Taggart Comet Apr 11 '20 at 06:12

0 Answers0