0

I am trying to save my signature on the server, but it is not saving the signature but I get the "data:image/png;base64,iVBORw..." on my js console log. Please help me to save my signature on the server.

My Js code:

function uploadSignature(mimetype) {
  var dataurl = signaturePad.toDataURL(mimetype);
  var blobdata = dataURLtoBlob(dataurl);

  var fd = new FormData(document.getElementById("UploadForm"));
  fd.append("imageData", blobdata, "filename")

  /** will result in normal file upload with post name "signature" on target url **/
  $.ajax({
    url: "/signature_pad.php",
    type: 'POST',
    data: fd,
    processData: false,
    contentType: false,
    dataType: 'html',
    success: function (response) {
      alert("AJAX OK: uploadSignature() ok");
      console.log(response);
    },
    error: function (e) {
      alert("AJAX ERROR: uploadSignature() fehlgeschlagen");
      console.log(e);
    }
  });
}

My PHP codes to save the signature in the server:

<?php
if (isset($_POST['imageData'])) {
$imgData = base64_decode($_POST['imageData']);
$image_name= $_POST['image_name'];

// Path where the image is going to be saved
$filePath = '../'.$image_name.'.png';

// Delete previously uploaded image
if (file_exists($filePath)) { unlink($filePath); }

// Write $imgData into the image file
$file = fopen($filePath, 'w');
fwrite($file, $imgData);
fclose($file);
} else {
echo "imgData doesn't exists";
}

I am new in ajax, I couldn't understand how to send a request through ajax to save the signature on the server. Thank you so much

Khurshid Jumaboev
  • 67
  • 1
  • 6
  • That string is base64 encrypted string, you can save that string in to your database and if you want to view image, then you can put this string in src of imag tag it will sow image. you can put this string in browser url this will show you the image. – turivishal Jun 22 '20 at 17:46
  • I can store this base64 encrypted string to my database with Ajax/Jquery? How can I do it? Thank you! – Khurshid Jumaboev Jun 22 '20 at 18:09
  • you already generating that sting in server / php side then connect your db and store it. not from ajax/jquery side. – turivishal Jun 22 '20 at 19:05
  • It is saying imgData doesn't exists as it doesn't detect imgData from the serverside, could you please show me the example? – Khurshid Jumaboev Jun 22 '20 at 19:25
  • The common method to store images in a database is to convert the image to base64 data before storing the data. This process will increase the size by 33%. Alternatively it is possible to directly store the image as a BLOB; [read about this question](https://stackoverflow.com/questions/9722603/storing-image-in-database-directly-or-as-base64-data) – jecorrales Jun 24 '20 at 21:36

0 Answers0