Probleme bei mehreren Bildern in Canvas

[kleinmarci]

Hallo zusammen,

ich stehe auf dem Schlauch und bitte um euer Schwarmwissen.
Mit dem u.A. Code beabsichtige ich mehrere Symbole in Canvas darzustellen.
Die Dartstellung geling mir aber leider immer nur das letzte aus der Datenbank.
Was mache ich falsch, dass ich es nicht schaffe mehrere Bilder darzustellen?

Ich bin für jeden Tipp sehr dankbar.

<script>
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        const img = new Image();
        <?php
         $sql = "SELECT * FROM v1_card_cards Where active='1'";
            foreach ($pdo->query($sql) as $row) {
            echo'img.src = "'.$row['file'].'";';
            }    

              ?>



        img.onload = function() {
          canvas.height = canvas.width * (img.height / img.width);
          const oc = document.createElement('canvas');
          const octx = oc.getContext('2d');
          oc.width = img.width * 1;
          oc.height = img.height * 1;
          octx.drawImage(img, 0, 0, oc.width, oc.height);
          ctx.drawImage(oc, 0, 0, oc.width * 1, oc.height * 1, 0, 0, canvas.width, canvas.height);
        }
       <?php


       $sql = "SELECT * FROM v1_card";
          foreach ($pdo->query($sql) as $row) {


            $sql = "SELECT * FROM v1_card_milsym Where file_name ='" . $row['name'] . "'";
              foreach ($pdo->query($sql) as $row2) {
                $path = $row2['file'];
                $namm =  $row2['id'];
              }

              ////////////////

            echo' width = window.innerWidth;';
            echo' height = window.innerHeight;';

            echo'function drawImage(imageObj) {';
            echo' stage = new Konva.Stage({';
            echo'container: "container",';
            echo'width: width,';
            echo'height: height,';
            echo'});';

            echo' layer = new Konva.Layer();';

            echo' MilSym = new Konva.Image({';
            echo'image: imageObj,';
            echo' x: ' . $row['posx'] . ',';
            echo'y: ' . $row['posy'] . ',';
            echo'width: 90,';
            echo'height: 70,';
            echo'draggable: true,';
            echo'});';


            echo'MilSym.on("mouseover", function () {';
            echo'  document.body.style.cursor = "pointer";';
            echo'});';
            echo'MilSym.on("mouseout", function () {';
            echo'  document.body.style.cursor = "default";';
            echo'});';

            echo'layer.add(MilSym);';
            echo'stage.add(layer);';
            echo'}';
            echo' imageObj = new Image();';
            echo'imageObj.onload = function () {';
            echo'drawImage(this);';
            echo'};';
            echo'imageObj.src = "'. $path.'";';​
              /////////




          }

      ?>​

[scatello]

Die Dartstellung geling mir aber leider immer nur das letzte aus der Datenbank.

Und warum? Weil du in der Schleife das Image immer wieder überschreibst. Im erzeugten Quellcode dürfte es bei dir so ausehen:
img.src = "bild1.jpg"
img.src = "bild2.jpg"
img.src = "bild3.jpg"
img.src = "bild4.jpg"

[kleinmarci]

Und warum? Weil du in der Schleife das Image immer wieder überschreibst. Im erzeugten Quellcode dürfte es bei dir so ausehen:
img.src = "bild1.jpg"
img.src = "bild2.jpg"
img.src = "bild3.jpg"
img.src = "bild4.jpg"

Ich lasse den Code mit der foreach schleife wiederholen, sodass er die Werte immer von dem in der DB bekommt.
Der Gedanke ist, dass er die richtigen Werte aus der DB holt und für das jeweilige Symbol setzt, dies tut er auch aber halt nur für das letzte in der DB gefunden Symbol

// Hier gehe ich die schleife sooft durch wie Symbole in der DB gespeichert sind
$sql = "SELECT * FROM v1_card";
          foreach ($pdo->query($sql) as $row) {

// Hier suche ich die Symboldaten aus einer anderen Tabelle
            $sql = "SELECT * FROM v1_card_milsym Where file_name ='" . $row['name'] . "'";
              foreach ($pdo->query($sql) as $row2) {
                $path = $row2['file'];
                $namm =  $row2['id'];
              }

              ////////////////

            echo' width = window.innerWidth;';
            echo' height = window.innerHeight;';

            echo'function drawImage(imageObj) {';
            echo' stage = new Konva.Stage({';
            echo'container: "container",';
            echo'width: width,';
            echo'height: height,';
            echo'});';

            echo' layer = new Konva.Layer();';

            echo' MilSym = new Konva.Image({';
            echo'image: imageObj,';
            echo' x: ' . $row['posx'] . ',';
            echo'y: ' . $row['posy'] . ',';
            echo'width: 90,';
            echo'height: 70,';
            echo'draggable: true,';
            echo'});';


            echo'MilSym.on("mouseover", function () {';
            echo'  document.body.style.cursor = "pointer";';
            echo'});';
            echo'MilSym.on("mouseout", function () {';
            echo'  document.body.style.cursor = "default";';
            echo'});';

            echo'layer.add(MilSym);';
            echo'stage.add(layer);';
            echo'}';
            echo' imageObj = new Image();';
            echo'imageObj.onload = function () {';
            echo'drawImage(this);';
            echo'};';
            echo'imageObj.src = "'. $path.'";';​ 

[scatello]

Dann sieh' dir doch mal deine Schleifen genau an.

foreach ($pdo->query($sql) as $row2) {
                $path = $row2['file'];
                $namm =  $row2['id'];
              }​ 

Was soll außer dem letzten Datensatz sonst in $row2 stehen?

[basti1012]

Vieleicht sollte er mal echos benutzen hier

              foreach ($pdo->query($sql) as $row2) {
             echo  $path = $row2['file'];
                echo $namm =  $row2['id'];
              }​ 

Und dann mal im Quelltext schauen des Browsers.
Vielleicht versteht er dann, was er ändern muss.

Ich weiß ja nicht wie der Quelltext aussehen muss (weil Canvas Malerei ist nicht mein Ding), sonst hätte ich gesagt das man mal einfach die Klammer so um 35 Zeilen verschiebt , doch dann sollte das JS nicht mehr laufen.

[Sodah73]

Der Hauptfehler in deinem Code liegt darin, dass du die Variable img.src überschreibst, während die Schleife durch die Datenbankergebnisse iteriert. Das führt dazu, dass nur das letzte Bild angezeigt wird, da img.onload erst am Ende ausgeführt wird, nachdem alle img.src-Zuweisungen durchgelaufen sind.

Um dieses Problem zu lösen, musst du sicherstellen, dass jedes Bild separat geladen und gezeichnet wird. Hier ist eine optimierte und funktionierende Lösung: Lösung


Du kannst die Bilder in einer Schleife iterieren und jedes Bild separat laden und zeichnen:

<script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");

    <?php
    // Hole alle aktiven Karten
    $sql = "SELECT * FROM v1_card_cards WHERE active='1'";
    $images = [];
    foreach ($pdo->query($sql) as $row) {
        $images[] = [
            'src' => $row['file'],
            'x' => $row['posx'],
            'y' => $row['posy'],
            'width' => 90,
            'height' => 70
        ];
    }
    // Übergib die Bilddaten an JavaScript
    echo 'const imageData = ' . json_encode($images) . ';';
    ?>

    function drawImages(data) {
        data.forEach((item) => {
            const img = new Image();
            img.onload = function () {
                ctx.drawImage(img, item.x, item.y, item.width, item.height);
            };
            img.src = item.src;
        });
    }

    drawImages(imageData);
</script>​

Erklärung

1. Datenübergabe mit JSON:
   • Alle Bilddaten werden zuerst in ein PHP-Array gesammelt.
   • Mit json_encode() wird das Array in JavaScript übergeben, wodurch alle Bilder und ihre Positionen verfügbar sind.
2. Schleife in JavaScript:
   • Eine Schleife (data.forEach) durchläuft die Bilddaten.
   • Für jedes Bild wird ein neues Image-Objekt erstellt.
   • Das Bild wird erst dann gezeichnet, wenn es vollständig geladen ist (img.onload).
3. Zeichnen der Bilder:
   • Jedes Bild wird separat gezeichnet, basierend auf den x- und y-Positionen sowie der Breite und Höhe.

Vorteile

• Du überschreibst keine Variablen.
• Der Code ist effizient und flexibel, falls weitere Bilder hinzugefügt werden sollen.
• Alle Bilder werden sauber in einer Schleife geladen und gezeichnet.

Damit solltest du jetzt in der Lage sein, mehrere Bilder korrekt darzustellen! ?

[scatello]

Sodah73
Der Thread ist vom 11.02.2023! Du bist verdammt spät dran.

[jimknight]

Der Hauptfehler in deinem Code besteht darin, dass du während der Iteration über die Datenbankergebnisse die Variable img.src überschreibst. Dies hat zur Folge, dass nur das zuletzt genannte Bild zu sehen ist, weil img.onload erst nach Abschluss aller img.src-Zuweisungen erfolgt.