Seite 2 von 2 Erste 12
  1. #11
    Avatar von sam3nx
    Registriert seit
    21.01.2022
    Beiträge
    11
    Thanked 2 Times in 2 Posts

    Standard AW: Text aus PSD Datei in eigener Anwendung extrahieren.

    Auch mit aktuellen Überarbeitungen, komm ich leider noch nicht ganz ans Ziel, aber das Ziel ist schon in Sichtweite



    index.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    </head>
    <body>

    <div class="back">
    <form>
    <h3>Automatic generate</h3>
    <label>Vorname</label>
    <input type="text" id="inVornamer" placeholder="Gebe Vornamen ein. . . ">
    <label>Namen</label>
    <input type="text" id="inName" placeholder="Gebe Namen ein . . .">
    <label>Geburtsdatum</label>
    <input type="date" id="iNGeburtstag" placeholder="Geburtstag . . . ">
    <label>Geburtsort</label>
    <input type="text" id="inGeburtsort" placeholder="Gebe Geburtsort ein. . . ">
    <label>Nationalität</label>
    <input type="text" id="inNationalität" placeholder="Nationalität">
    <label>Ablaufdatum</label>
    <input type="date" id="inGeburtsdatum" placeholder="Geburtsdatum . . .">
    <label>Prüfnummer</label>
    <input type="number" id="inPrüfnummer" placeholder="Prüfnummer OBEN RECHTS...">
    <label>Code</label>
    <input type="number" id="inCode" placeholder="Code UNTEN RECHTS...">
    <label>Unterschrift</label>
    <input type="text" id="inUnterschrift" placeholder="Unterschrift. . . ">
    <label for="file" class="upload">Upload an Image</label>
    <br>
    <span>Choose one that desrcibes you perfectly</span>
    <input type="file" id="file" accept="image/*" onchange="loadImage(event)">
    </form>
    <button type="submit" id="preview">Preview</button>


    <div class="container">
    <canvas id="result" class="card">

    <header id="head">
    <div class="camp">
    <h4>Generiertes Document ist fast fertig. </h4>
    <span>Preview</span>
    </div>
    <img src="./rechnung1.png" id="logo">
    </header>

    <div class="content">
    <img src="" id="imgDisplayed">
    <ul>
    <li id="name"></li>
    <li id="vorname"></li>
    <li id="geburtsdatum"></li>
    <li id="nationalität"></li>
    <li id="geburtsort"></li>
    <li id="ablaufdatum"></li>
    <li id="prüfnummer"></li>
    <li id="code"></li>
    <li id="unterschrift"></li>
    <li>SubN°:<span id="num"></span></li>
    </ul>
    </div>
    <div class="container">
    <canvas id="result" class="card"></canvas>

    </canvas>
    <button id="down">Download</button>
    </div>


    <script src="main.js"></script>
    </body>
    </html>

    main.js
    const canvas = document.getElementById("result");
    const preview = document.getElementById("preview");
    preview.addEventListener("click", prev);

    canvas.height = canvas.width / 1.616;
    const ctx = canvas.getContext("2d");
    ctx.font = "20px Helvetica";

    const image = document.getElementById("imgDisplayed");
    const logo = document.getElementById("logo");



    function prev(){

    let inName = document.getElementById("inName").value;
    let inGeburtsdatum = document.getElementById("inGeburtsdatum").value;
    let inVorname = document.getElementById("inVorname").value;
    let inAblaufdatum = document.getElementById("inAblaufdatum").value;
    let inCode = document.getElementById("inCode").value;
    let inNationalität = document.getElementById("inNationalität").value;
    let inUnterschrift = document.getElementById("inUnterschrift").value;
    let inpPüfnummer = document.getElementById("inPrüfnummer").value;
    let inGeburtsort = document.getElementById("inGeburtsort").value;

    const name = document.getElementById("name");
    const geburtstag = document.getElementById("geburtstag");
    const vorname = document.getElementById("vorname");
    const ablaufdatum = document.getElementById("ablaufdatum");
    const code = document.getElementById("code");
    const nationalität = document.getElementById("nationalität");
    const unterschrift = document.getElementById("unterschrift");
    const prüfnummer = document.getElementById("prüfnummer");
    const geburtsort = document.getElementById("geburtsort");


    geburtsort.innerHTML = inGeburtsort;
    unterschrift.innerHTML = inUnterschrift;
    nationalität.innerHTML = inNationalität;
    ablaufdatum.innerHTML = inAblaufdatum;
    code.innerHTML = inCode;
    name.innerHTML = inName;
    vorname.innerHTML = inVorname;
    geburtstag.innerHTML = inGeburtstag;
    prüfnummer.innerHRML = inPrüfnummer


    ctx.fillStyle = "#159";
    ctx.rect(0, 0, 300, 56);
    ctx.fill();
    ctx.fillStyle = "#fff";
    ctx.fillText("Preview", 10, 25);
    ctx.font = "12px Arial";
    ctx.fillText("Undergraduate", 15, 45);
    ctx.drawImage(logo, 230, 3, 50, 50);
    ctx.fillStyle = "#000";
    ctx.fillText(vorname.innerHTML, 112, 36);
    ctx.fillText(name.innerHTML, 228, 35);
    ctx.fillText(geburtstag.innerHTML, 289, 43);
    ctx.fillText("y0da WATERPROOF", 110, 165);
    ctx.fillText(nationalität.innerHTML, 100, 240);
    ctx.fillText(geburtsort.innerHTML, 100, 300);
    ctx.fillText(ablaufdatum.innerHTML, 100, 270);
    ctx.fillText(code.innerHTML, 203, 39);
    ctx.fillText(unterschrift.innerHTML, 302, 108);
    ctx.fillText(prüfnummer.innerHTML, 369, 46);
    ctx.drawImage(image, 10, 65, 80, 110);
    }

    function loadImage(event) {
    const image = document.getElementById("imgDisplayed");
    image.src = URL.createObjectURL(event.target.files[0]);
    }

    const download = document.getElementById("down");
    download.addEventListener("click", function(){

    if(window.navigator.msSaveBlob) {

    window.navigator.msSaveBlob(canvas.msToBlob(), "rechnung1.png");
    } else {

    const a = document.createElement("a");
    document.body.appendChild(a);
    a.href = canvas.toDataURL();
    a.download = "rechnung1.png";
    a.click();
    document.body.removeChild(a);
    }
    });
    und die CSS
    body{
    font: 20px Regular ocrB Regular;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    }
    h3{
    color: #159;
    }
    .back{
    margin-left: 10%;
    }
    form{
    width: 40%;
    float: left;
    }
    .container{
    width: 40%;
    float: left;
    margin-top: 3em;
    color:#000;
    text-align: center;
    }
    input{
    display: table;
    margin-bottom: 1em;
    width: 60%;
    font-size: 16px;
    border: 2px solid #159;
    border-radius: 5px;
    padding: 3px;
    }
    #file{
    opacity: 0;
    width: 0.1px;
    height: 0.1px;
    position: absolute;
    }
    .upload, button{
    color: #fff;
    background: #159;
    padding: 5px;
    border: 2px solid #159;
    border-radius: 5px;
    cursor: pointer;
    }
    form span{
    font-size: 12px;
    }
    #preview{
    font-size: 16px;
    margin-top: 1em;
    margin-left: 2em;
    }
    #result{
    position: relative;
    width: 70%;
    margin-left: 15%;
    border: 2px solid #ddd;
    border-radius: 12px;
    margin-bottom: 2em;
    }
    header{
    width: 100%;
    background: #159;

    border-radius: 12px 12px 0 0 ;
    }
    header::after{
    content: "";
    display: flex;
    clear: both;
    }
    .camp{
    width: 40%;
    float: left;
    color: #fff;
    }
    .camp h4{
    margin: 12px auto 0 7px;
    }
    .camp span{
    margin-left: 8px;
    }
    #logo{
    width: 80px;
    height: 80px;
    float: right;
    }
    Now we get into the content part
    .content{
    width: 80%;
    }
    .content::after{
    content: "";
    display: flex;
    clear: both;
    }
    .content img{
    float: left;
    width: 80px;
    height: 105px;
    margin-left: 7px;
    margin-top: 12px;

    }
    .content ul{
    width: 50%;
    float: left;
    padding-left: 15px;
    }
    ul li{
    list-style-type: none;
    }

    #down{
    font-size: 18px;
    }
    @media only screen and (max-width:768px) {
    .container, form{
    width: 90%;
    margin-left: 5%;
    }
    #result{
    margin-left: 0;
    margin-right: 5%;
    }
    #down{
    margin-right: 2em;
    margin-bottom: 2em;
    }

    }
    btw mit Java zu arbeite finde ich deutlich(?) nicht direkt schwerer aber komplexer, die Bedeutungen heißen anders anders. xd.


    Und dann hab Nativ weiterhin auch noch gewerkelt, IRGENDWO muss nen Erfolg erzielt werden sonst geh ich kaputt xd
    https://prnt.sc/1G9D9O3CdLp9


    Im ersten Script, passiert nichtmal was wenn ich auf Preview klicke -.-
    P.S -Shane

  2. #12
    Avatar von DMW007
    Registriert seit
    15.11.2011
    Beiträge
    6.080
    Thanked 9.118 Times in 2.995 Posts
    Blog Entries
    5

    Standard AW: Text aus PSD Datei in eigener Anwendung extrahieren.

    Wenn du Erfolge erzielen willst, mach das, was ich schon vor einer Weile gesagt habe: Erstelle ein minimales Beispiel und gehe systematisch Schritt für Schritt vor. Geht was nicht, grenze es ein, um die Fehlerquelle zu finden und zu beheben. Die gleiche Methode wende ich bis heute an und löse damit nahezu tagtäglich verschiedene Probleme. Sowohl an Dingen, mit denen ich Erfahrung habe, als auch bei neuen Themen. Erfolgsquote ca. 99 %. Die restlichen 1 % sind Bugs außerhalb meiner Software oder ganz ungünstige Konstellationen, die zu seltenen Komplikationen führen.

    Stattdessen springst du willkürlich zu diversen anderen Technologien, sobald etwas nicht funktioniert. Als ob es eine gäbe, in der alles auf Anhieb klappt, wenn man sie nur gefunden hat. Vergiss es, das Problem ist nicht die Sprache, sondern deine Vorgehensweise. Zielführend ist, wenn was nicht geht herauszufinden warum: Erscheint eine Fehlermeldung? Wenn nein, wo werden Fehler hingeschrieben? Wo liegen die Logs? Wie kann ich debuggen, was für Daten rein gehen und welche raus kommen? Immer zuerst schauen, was konkret schief läuft. Erst dann kann man es lösen und wenn man alle Probleme gelöst hat, geht es dann auch. Bei jedem Technologiewechsel fängst du dagegen von vorne an, das ist ineffizient und frustrierend. Bleibe also bei einer Technologie. Nimm am besten das PHP-Beispiel, dass ich gepostet habe, und passe es an, um erst mal EINE Zeile auf das Bild zu schreiben. Kein Formular, kein nix, klein Anfangen. Da sind im Gegensatz zu ChatGPT keine Syntaxfehler drin. Das ist wie gesagt Code, der hier auf dem U-Labs Server liegt und seit Jahren funktioniert.

    Und schalte einen Gang runter, werde gründlicher sowie tiefer gehend, statt schneller. Du machst immer wieder Flüchtigkeitsfehler. Zum Beispiel sprichst du von Java, was du in dem Post hast ist aber JavaSkript (JS). Das ist kein Detail wie ein fehlendes Komma im Satzbau. Java und JS sind zwei komplett verschiedene Technologien, außer dem Name haben die kaum was miteinander zu tun. Wenn du Bezeichnungen falsch verwendest, führt das zu Verwirrung und Fehlern, findest z.B. wenn es dumm läuft beim recherchieren nichts vernünftiges. In der IT geht es um Präzision. Ein Komma das fehlt oder an der falschen Stelle ist, führt dazu, dass entweder gar nichts funktioniert oder die Software was falsches macht. Daher Fehlermeldungen lesen, die Sprachen fangen schon vieles ab. Auch ich vergesse mal ein Semikolon, eine Klammer oder vertippe mich. Wenn ich mir die Fehlermeldung dazu anschaue, ist das in ein paar Sekunden gefixt und dann läuft das Ganze.


  3. The Following User Says Thank You to DMW007 For This Useful Post:

    sam3nx (17.06.2023)

  4. #13
    Avatar von Darkfield
    Registriert seit
    24.04.2013
    Beiträge
    3.046
    Thanked 1.779 Times in 1.268 Posts

    Standard AW: Text aus PSD Datei in eigener Anwendung extrahieren.

    Sollen wir den Fred mit einem Ausweisgenerator wirklich offen lassen?!
    Wer die Freiheit aufgibt um Sicherheit zu gewinnen, der wird am Ende beides verlieren. (Benjamin Franklin)
    Die zwei häufigsten Elemente im Universum sind Wasserstoff und Blödheit. (Yonathan Simcha Bamberger)
    Wer schweigt, stimmt nicht immer zu. Er hat nur manchmal keine Lust mit Idioten zu diskutieren. (Albert Einstein)
    Der Weg zur Hölle ist mit guten Vorsätzen gepflastert. (Dante)
    Es gibt Besserwisser, die niemals begreifen, dass man recht haben und ein Idiot sein kann. (Martin Kessel)
    Doofheit ist keine Entschuldigung.

Seite 2 von 2 Erste 12

Ähnliche Themen

  1. [VBA] Text von einem PDF extrahieren in eine DB
    Von Saad im Forum Skriptsprachen
    Antworten: 0
    Letzter Beitrag: 03.11.2017, 15:26
  2. AHK Anwendung decompilen
    Von x BoooM x im Forum Reverse Engineering
    Antworten: 4
    Letzter Beitrag: 06.02.2017, 00:29
  3. Windows 10 erkennt jar Datei als rar Datei
    Von Y zu dem K im Forum Windows
    Antworten: 5
    Letzter Beitrag: 02.10.2015, 19:10
  4. VB.Net Anwendung Schützen/Eigener Installer
    Von mkdir im Forum .Net
    Antworten: 6
    Letzter Beitrag: 20.02.2012, 20:54
  5. Textbox1.Text = Textbox7.Text + keys.enter
    Von gcp im Forum Hochsprachen
    Antworten: 20
    Letzter Beitrag: 22.03.2011, 22:13
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.