How to save signed signature to a database record for using signaturepad?

I need some help, i have a button to draw a signature but i want to know how to save this caption once drawn to the database record, we using signaturepad on our website. I want to implement this logic int our website and need some guidance to do this will be appreciated.

// HTML code

<div class="wrapper">
  <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</div>

  <div class="single-form">
                                    <div id="signature-pad" class="sig sigWrapper">
                                     <div class="display-block signature-pad" style="touch-action: none;">
                                       <label for="signatureInput">Signature </label>
                                     <input type="signature" name="signature" id="signature" value="">
                                     
                                        
                                    
                                    </div>
                                    </div>
                                </div>

// Javascript
var canvas = document.getElementById('signature-pad');

// Adjust canvas coordinate space taking into account pixel ratio,
// to make it look crisp on mobile devices.
// This also causes canvas to be cleared.
function resizeCanvas() {
    // When zoomed out to less than 100%, for some very strange reason,
    // some browsers report devicePixelRatio as less than 1
    // and only part of the canvas is cleared then.
    var ratio =  Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

window.onresize = resizeCanvas;
resizeCanvas();

var signaturePad = new SignaturePad(canvas, {
  backgroundColor: 'rgb(255, 255, 255)' // necessary for saving image as JPEG; can be removed is only saving as PNG or SVG
});
document.getElementById('draw').addEventListener('click', function () {
  var ctx = canvas.getContext('2d');
  console.log(ctx.globalCompositeOperation);
  ctx.globalCompositeOperation = 'source-over'; // default value
});

>Solution :

To save the signature drawn using SignaturePad to a database record, you need to first convert the signature to an image format that can be saved to the database. You can use the toDataURL() method of the SignaturePad instance to get a data URL of the signature image. You can then send this data URL to the server and save it to the database.

Here’s an example of how you can save the signature to a database record using Supabase:

// Get the SignaturePad canvas element
var canvas = document.getElementById('signature-pad');

// Create a SignaturePad instance
var signaturePad = new SignaturePad(canvas, {
  backgroundColor: 'rgb(255, 255, 255)' // necessary for saving image as JPEG; can be removed is only saving as PNG or SVG
});

// Get the data URL of the signature image
var signatureDataURL = signaturePad.toDataURL();

// Send the data URL to the server and save it to the database using Supabase
const { data, error } = await supabase
  .from('signatures')
  .insert({ image: signatureDataURL });

if (error) {
  console.error(error);
} else {
  console.log('Signature saved successfully');
}

In this example, we’re using Supabase to save the signature image to a database record. We first get the data URL of the signature image using the toDataURL() method of the SignaturePad instance. We then use the insert() method of the Supabase client to insert the data URL into a signatures table in the database.

Note that you’ll need to set up a Supabase project and initialize the Supabase client before you can use the code above. You can refer to the Supabase documentation for more information on how to do this.

SOURCES:
https://github.com/szimek/signature_pad#to-data-url