var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL('image/png');

$.ajax({
    type: "POST", 
    url: "canvas_ajax_upload_post.pl", /* URL zum Perl-CGI anpassen! */
    data: { canvas_image: dataURL }      
}).done(function(msg){ 
     alert(msg); 
});

use autodie;            # damit Program stirbt aut6omatisch bei Fehlern
use MIME::Base64;       # zum Dekodieren von Base64 notwendig
use CGI;                # um mit CGI-Parametern umzugehen

# Handle für aktuelle CGI-Daten 
my $q = CGI->new; 

# Ort wo die Dateien gespeichert werden sollen
my $image_save_folder = '/home/test/customers/signatures';

# und testen ob überhaupt Canvas-Daten gesendet wurden
if ( my $canvas_data = $q->param( 'canvas_image' ) ) {

  # Data-URL ist ähnlich wie 'data:image/png;base64'
  # Kopf der Daten auf Korrektheit prüfen
  my $is_png = $canvas_data =~ m/\Qdata:image/png;base64,\E/;

  # Kundennummer aus gesendeten Daten holen
  my $customer_number = $q->param('customer_number');

  # Prüfen ob gültig
  if ($customer_number =~ m/^\d{1,8}$/      # wenn bis zu 8 Ziffern sind
     and $is_png                            # und die übertragenen Daten vom MIME-Typ PNG 
     ) 
  {
    Kopf der Data-URL entfernen
    $canvas_data =~ s/\Qdata:image/png;base64\E//;
    # aus Base64 nach Binär dekodieren
    $canvas_data = decode_base64($canvas_data);

    # Ausgabedatei erzeugen
    open ( my $out_file,'>', "$image_save_folder/". $customer_number . 'signature.png' );
    binmode $out_file;
    print $out_file $canvas_data;

  }
  else {
   # hier deine Fehlerbehebung wenn Kundennummer oder Datentyp des Bildes nicht stimmt
  }

}