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?
7 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
-
Ich habe den o.g. Tabellenaufbau erstellt und es funktioniert auch.
Aber was ich befürchtet habe, es funktioniert nicht wenn ich das mit einen Trigger (z.B. Datensatzänderung) starten will.
-
Ich versuche gerade über quickchart und Wordcloud das Problem zu lösen.
Diagramme aus quickchart nutze ich bereits erfolgreich für Ausdrucke.
Hier bekomme ich das aber nicht hin. Es wird keine Datei von quickchart generiert/runtergeladen.
Anbei die der Link zur Referenz von quickchart/Wordcloud:
https://quickchart.io/documentation/word-cloud-api/
Mein Code:
let url := "https://quickchart.io/wordcloud"; let headers := { 'Content-Type': "application/json" }; let body := { format: ".png", width: 400, height: 200, fontFamily: "sans-serif", fontScale: 15, scale: "linear", text: "Testzeile" }; let response := do as server http("POST", url, headers, body) end; 'URL-Bild' := null; 'URL-Bild' := response.result; Bild := null; Bild := importFile(this, 'URL-Bild', "Text.png")
Vielleicht hat ja jemand eine Idee ? Für die Bemühungen schon mal jetzt Danke.
Content aside
- vor 3 TagenZuletzt aktiv
- 7Antworten
- 76Ansichten
-
3
Folge bereits