Speichern und laden einer internen Variable über html/Java

Question

Ich möchte mit über Java ein Zeichenfeld einbauen, das so entstandene Bild als Variable speichern, auf der nächsten Seite wieder laden und wieder als Bild anzeigen angeben.

Das Zeichenfeld einbauen funktioniert. Das Anzeigen des Bildes bekomme ich bestimmt auch hin, wenn ich die Variable laden könnte.

Also das Problem liegt irgendwo auf dem Weg zwischen Variable speichern und auf der nächsten Seite wieder laden.

Auf der ersten Seite habe ich die interne Variablen Frage mit dem Variablennamen A103_01 angelegt:

Das hier ist die Speicherfunktion des Java Skript von Seite 1, die jedesmal beim setzten eines Strichs ausgeführt wird:

 function saveCanvasToVariable() {
    const dataURL = canvas.toDataURL('image/png');  // base64 PNG
    document.getElementById("A103_01").value = dataURL;}

Die müsste eigentlich funktionieren, denn wenn ich in der Konsole folgenden code eingeben, verändert sich die Länge der Variable:

document.querySelector('input[name="A103_01"]').value.length

Auf der zweiten Seite habe ich diesen PHP Code

prepare_input('A103_01');

und diesen HTML Code

   <p>Ihre handschriftliche Eingabe:</p>
<img id="sigPreview" alt="Handschriftliche Eingabe"
 style="max-width: 100%; border: 1px solid #000;">

    
<script> 
var dataURL = document.getElementById("A103_01").value;   

if (dataURL && dataURL !== "" && dataURL.indexOf("data:image") === 0) {
    document.getElementById("sigPreview").src = dataURL;
} else {
document.getElementById("sigPreview").alt = "Kein Bild gefunden.";
}
</script>

Die Konsole gibt mir diesen Fehler aus:

TypeError: null is not an object (evaluating 'document.getElementById("A103_01").value')

Ich nehme deswegen an, dass entweder das Speichern auf Seite 1 oder das Laden auf Seite 2 nicht funktioniert, aber dort komme ich nicht weiter.

Es wäre wunderbar, wenn mir jemand hier helfen könnte.
Dankeschön

Answer 1

Es ist wenig effizient, wenn Sie die Daten als String im Datensatz speichern - vor allem können Sie pro Variable und Fall max. 32 kB speichern, und das ist evtl. zu wenig.

Verwenden Sie stattdessen den Fragetyp "Dateiinhalte übertragen". Wenn Sie die Vorlage "Einfache Zeichenfläche" in Ihren Fragenkatalog importieren, sehen Sie dort auch gleich den JavaScript-Code, welcher das Bild an den Server übermittelt. Diesen können Sie direkt für Ihre eigene Zeichenfläche verwenden.

Comments

Vielen Dank!

---

Die einfache Zeichenfläche zu nutzen funktioniert wunderbar, aber ich schaffe es nicht das Bild auf der nächsten Seite anzeigen zu lassen.

in PHP kann ich mir mit

$name = value('A104x02');
replace('%moderator%', $name);

den Namen der Datei auslesen lassen und durch html (<strong>%moderator%</strong> ) anzeigen lassen.

Die Java Funktion

<img src='%moderator%'
     alt="Ihre Zeichnung"
     style="max-width:100%; height:auto; border:1px solid #ccc;">

bekomme ich nicht zum laufen. Könnten Sie mir da vielleicht weiterhelfen?