Save scratched image inside the server and send the image name to Mysql

Question

I’m using this code to draw on the screen https://github.com/szimek/signature_pad

How to save the image inside the server and send the image name to Mysql?

Example directory: /home4/host/public_html/tests/

function download(dataURL, filename) {
  if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1) {
    window.open(dataURL);
  } else {
    var blob = dataURLToBlob(dataURL);
    var url = window.URL.createObjectURL(blob);

    var a = document.createElement("a");
    a.style = "display: none";
    a.href = url;
    a.download = filename;

    document.body.appendChild(a);
    a.click();

    window.URL.revokeObjectURL(url);
  }
}

function dataURLToBlob(dataURL) {
  // Code taken from https://github.com/ebidel/filer.js
  var parts = dataURL.split(';base64,');
  var contentType = parts[0].split(":")[1];
  var raw = window.atob(parts[1]);
  var rawLength = raw.length;
  var uInt8Array = new Uint8Array(rawLength);

  for (var i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }

  return new Blob([uInt8Array], {
    type: contentType
  });
}


var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
  backgroundColor: 'rgba(255, 255, 255, 0)',
  penColor: 'rgb(0, 0, 0)'
});

var saveButton = document.getElementById('save');
var cancelButton = document.getElementById('clear');



saveButton.addEventListener("click", function(event) {
  if (signaturePad.isEmpty()) {
    alert("Faça sua assinatura.");
  } else {
    var dataURL = signaturePad.toDataURL();
    download(dataURL, "signature.png");
    //alert(dataURL);
  }
});

cancelButton.addEventListener('click', function(event) {
  signaturePad.clear();
});

.wrapper {
  position: relative;
  width: 250px;
  height: 367px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

img {
  position: absolute;
  left: 0;
  top: 0;
}

.signature-pad {
  position: absolute;
  left: 0;
  top: 0;
  width: 250px;
  height: 367px;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.umd.min.js"></script>


<div class="wrapper">
  <img src="http://www.hostcia.net/testes/html5Assinatura/Hatch.jpg" width=250 height=367 />
  <canvas id="signature-pad" class="signature-pad" width=250 height=367></canvas>
</div>
<div>
  <button id="save">Save</button>
  <button id="clear">Clear</button>
</div>

Thank you very much.