Thread Canvas Inhalt auf Server speichern? (18 answers)
Opened by volker.55211 at 2022-01-14 16:48

GwenDragon
 2022-01-15 15:04
#194160 #194160
User since
2005-01-17
14510 Artikel
Admin1
[Homepage]
user image
Ich kenne dein CGI-Programm und deine Kenntnisse nicht, und kann daher nur rudimentär Tipps geben.

Canvas per JS auslesen kannst du ja, so wie ich das verstehe. Wie du den Canvas in PNG umwandelst weiß ich nicht. Kennst du dich XHR und jQuery aus (da lassen sich Daten einfacher versenden).
Wenn was unverständlich, frage bitte weiter.

jQuery-Schnippsel (musst du einbeinden):
Code (javascript): (dl )
1
2
3
4
5
6
7
8
9
10
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); 
});


Perl-Code als rudimentäres Beispiel zum Empfang der einer Data-URL(musst du erst mal noch lokal testen!).

canvas_ajax_upload_post.pl
Code (perl): (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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
  }

}


Wie gesagt, das Ganze ist ’ne Programmieranregung für dich, ohne Garantie auf Vollständigkeit und korrekte Funktion. Eben eine ungetestete Idee.
Last edited: 2022-01-15 15:52:39 +0100 (CET)
die Drachin, Gwendolyn


Unterschiedliche Perl-Versionen auf Windows (fast wie perlbrew) • Meine Perl-Artikel

View full thread Canvas Inhalt auf Server speichern?