0

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

null
    • + Maßanzug statt Massenware +
    • RonaldP
    • gestern
    • Gemeldet - anzeigen

    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:

    1. Button-Klick: Wenn du auf den Button mit der Aufschrift "Click me" klickst, wird die Funktion createimage() aufgerufen.

    2. 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.

    3. Hintergrundfarbe: Das Zeichenfeld wird mit einer Hintergrundfarbe gefüllt, in diesem Fall einem Blauton (RGB-Wert: 73, 109, 137).

    4. 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.

    5. 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.

    6. 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.

    7. 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

      • + Maßanzug statt Massenware +
      • RonaldP
      • gestern
      • Gemeldet - anzeigen

      Mit dieser Einschränkung: Dieses Beispiel funktioniert nur mit einzeiligem Text!
      Sonst passiert nichts, wenn Du auf den Button klickst.

      Es empfiehlt sich, wenn möglich, für diese Tabelle den Änderungsverlauf zu deaktivieren.
      Da das Textfeld Temp-Bild-data mit jedem Erzeugen ziemlich viele Zeichen eingefüllt bekommt und das den Änderungsverlauf unnötig aufbläht und deine DB größer macht.

      • Wegener & Hinz GmbH
      • green_cup
      • vor 1 Stunde
      • Gemeldet - anzeigen

       Cool, vielen Dank für den Tip.

      Ich werde sobald Zeit ist versuchen das in meine DB zu migrieren. Ich hoffe das ich alles richtig verstanden habe und daß es möglich ist statt des Button einen anderen Trigger zur Auslösung zu nutzen.

      Schöne Restpfingsten !

Content aside

  • vor 1 StundeZuletzt aktiv
  • 3Antworten
  • 24Ansichten
  • 2 Folge bereits