Text zu Bild umwandeln
Hat jemand eine Idee wie ich Text aus ein Ninox-DB-Feld in eine Bilddatei umzuwandeln und in der Ninox-DB als Bild zu speichern?
3 Antworten
-
Moin ,
spannende Anforderung :-)
Ich habe es mit javascript in einem Formelfeld hinbekommen.
Du brauchst dafür diese Felder:
In den Änderungstrigger des Feldes Bild-Text kommt dieser code:
(damit wird das Bildfeld geleert, um die Anzeige der Vorschau neu zu initialisieren)removeFile(Bild); Bild := null
Der code im Formel-Feld:
let _table := tableId(this) + Nr; let _field := fieldId('Temp-Bild-data'); let _width := 400; let _height := 200; html("<button onclick='createimage()'>Click me</button> <canvas id='canvas' width='" + _width + "' height='" + _height + "' style=""display: none;""></canvas> <script> function createimage() { const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); // Hintergrundfarbe setzen context.fillStyle = 'rgb(73, 109, 137)'; context.fillRect(0, 0, canvas.width, canvas.height); // Text hinzufügen context.font = '20px Arial'; context.fillStyle = 'white'; context.fillText('" + 'Bild-Text' + "', 10, 50); // Canvas in ein Bild umwandeln const image = canvas.toDataURL('image/png'); // Bild in das Ninox-Feld einfügen database.update('" + _table + "', '" + _field + "', image); } </script> ")
Erläuterung:
Dieser Code erstellt eine Schaltfläche, die, wenn sie angeklickt wird, ein Bild generiert und es in ein Bildfeld deiner Datenbank einfügt.
Hier ist eine Schritt-für-Schritt-Erklärung, was passiert, wenn du auf den Button klickst:Button-Klick: Wenn du auf den Button mit der Aufschrift "Click me" klickst, wird die Funktion
createimage()
aufgerufen.Canvas-Element: Es gibt ein unsichtbares Zeichenfeld (Canvas) auf der Webseite, das verwendet wird, um das Bild zu erstellen. Die Größe dieses Zeichenfelds wird durch die Variablen
_width
und_height
festgelegt.Hintergrundfarbe: Das Zeichenfeld wird mit einer Hintergrundfarbe gefüllt, in diesem Fall einem Blauton (RGB-Wert: 73, 109, 137).
Text hinzufügen: Auf das Zeichenfeld wird ein Text geschrieben. Der Text lautet "Bild-Text" und wird in weißer Farbe und einer Schriftgröße von 20 Pixeln an der Position (100, 50) auf dem Zeichenfeld platziert.
Bild generieren: Das Zeichenfeld wird in ein Bild umgewandelt. Dieses Bild ist im PNG-Format und wird als eine lange Zeichenkette (Data-URL) dargestellt, die das Bild enthält.
Bild einfügen: Das generierte Bild wird als base64 in das Textfeld: Temp-Bild-data eingefügt. Das wird durch die Variablen
_table
und_field
festgelegt.In den Änderungstrigger des Temp-Bild-data kommt noch dieser code
Bild := importFile(this, 'Temp-Bild-data', 'Bild-Text' + ".png")
Zusammengefasst: Wenn du auf den Button klickst, wird ein Bild mit einem blauen Hintergrund und dem Text aus dem Feld "Bild-Text" erstellt und in das Bildfeld eingefügt.
VG Ronald
Content aside
- vor 58 MinutenZuletzt aktiv
- 3Antworten
- 24Ansichten
-
2
Folge bereits