Bilderupload klappt nicht

[PCFreak]

Hallo,

ich teste gerade Ordersprinter auf einem RaspberryPi 3. Klappt soweit alles sauber.

Heute wollte ich Bilder zu Produkten hochladen.

Beim 1. Versuch klappt der Upload, jedoch sieht das Ergebnis nach dem direkten Upload wie in Bild01 aus, das Bild wurde aber in der Kellner-Ansicht angezeigt.

bild01-2018-06-18_11h48_24.png (49.06 KiB) 8773 mal betrachtet

Bei jedem weiteren Versuch, auch nach mehrmaligem Entfernen, Aufräumen der DB usw. wird das Bild nirgends mehr korrekt angezeigt sondern nur noch mit einem Platzhalter wie in Bild01.

Auch ein Download des kompletten Bildmaterials ist seltsam. Ich vermute, in der Datei sollten die Bilder in Base64 Kodierung drin sein, bei mir schaut die Datei aber nur so aus:

Code: Alles auswählen

pcfreak@sprinter> cat bilddaten.ocs

Output

Code: Alles auswählen

1;Schweppes, 0,5l;;;
2;Schweppes, 0,3l;;;

Scheint also beim Upload Probleme zu geben oder beim Konvertieren in Base64? Ich kann mir momentan keinen Reim machen, wo das Problem liegt, ein kleiner Tipp wäre cool.

Für den LAMP Stack habe ich folgende Pakete installiert/konfiguriert:

Code: Alles auswählen

apt install apache2
apt install mariadb-server mycli
apt install php php-gd php7.0-gd libapache2-mod-php php-mcrypt php-mysql php-zip php-curl php-xml

Die Seite läuft komplett auf https und funktioniert soweit einwandfrei.

Vielen Dank schon mal vorab.

Gruß

Peter

[pichel]

Hallo Peter,

mir ist ein solcher Fehler noch nicht bekannt oder berichtet worden.

Kannst du mir per E-mail (siehe Impressum) das Apache Error-Log schicken? Hast du es mit png oder jpg Bildern versucht?

Sind die Bilder vielleicht so groß, dass die Einstellung von post_max_size in der php.ini den Upload verhindert?

Gruß,

Stefan

[PCFreak]

Hallo Stefan,

kurzes Update.

Ich habe es nun durchgängig mit PNGs probiert. Das klappt soweit, alle Bilder werden in der Getränkekarte angezeigt. Der Fehler, dass die Grafik in der Angebot/Bilderzuweisung nicht auftaucht besteht weiterhin.

Über die Developer-Tools im Chrome sehe ich, dass die Bilder mit

Code: Alles auswählen

<span class="imagepart"><img src="php/contenthandler.php?module=products&amp;command=getprodimage&amp;prodid=41&amp;millis=1529333144589"></span>

dort angezeigt werden sollen.

Ich habe in der Zwischenzeit die Pakete

Code: Alles auswählen

apt install imagemagick
apt install php-imagick

nachinstalliert.

Wegen Log-Dateien. Habe alle Logs gelöscht und die Seite nochmals aufgerufen. Die Bilder werden in der Zuordnungsseite nicht angezeigt, kein Fehler wird protokolliert im Apache2 error.log für die entspr. Seite.

Ich fahre SSL-only, kann es daran liegen? Ist vielleicht irgendwo in den PHP-Dateien http hart-codiert?

Gruß

Peter

[pichel]

Hallo Peter,

bist du sicher, dass du das richtige Log angeschaut hast? Die nicht eingeblendete Grafik sollte mindestens einen 404 im Log erzeugt haben. Bitte nutze doch mal einen anderen Browser als Chrome, z.B. Firefox - mit dem teste ich auch. Der Chrome besitzt ein sehr aggressives Caching, was bei sehr interaktiven Webapplikationen nicht immer von Vorteil ist.

Wenn das Verhalten im Firefox auch so aussieht, dann sollten wir mal telefonieren bzw. würde ich mich das gerne per TeamViewer mal abends anschauen.

Gruß,

Stefan

[PCFreak]

Hallo Stefan,

das Problem tritt mit Firefox und Chrome auf und zwar auch auf 2 unterschiedlichen Installationen:

- auf Raspberry Pi mit Ubuntu MATE
- auf CentOS7

Beide Installationen sind SSL only. Die CentOS-Version ist ein temporärer V-Server bei Digitalocean. Wenn du mir deinen SSH-Public-Key zukommen lässt, dann trage ich ihn für Root-Login ein und du kannst dich umsehen, ist kein Problem, ich mach einfach einen Snapshot vorher. Die notwendigen Credentials für die Ordersprinter Logins lasse ich dir dann zukommen.

Seltsamerweise werden die Beispielbilder sauber dargestellt, sobald ich aber eines auswähle, welches ich hochgeladen habe, klappt der Preview nicht. Du kannst das (sofern du dann die Daten von mir hast) mit dem Bild "Funky Cold Medina" testen, welches bereits auf dem System ist oder selber eins hochladen, wie gesagt, Server ist nicht wichtig.

Am besten du schreibst mir eine kurze PM wenn wir das so machen wollen?

Telefonieren können wir natürlich auch.

Gruß aus Bayern

Peter

[PCFreak]

Hallo Stefan,

noch eine Erkenntnis. Bei all meinen selbst hochgeladenen Bildern ist das Feld imgh in der Tabelle ordersprinter_prodimages im Gegensatz zu den Beispielbildern leer.

Code: Alles auswählen

mysql> show columns from ordersprinter_prodimages;
+---------+-------------+------+-----+---------+----------------+
| Field   | Type        | Null | Key | Default | Extra          |
+---------+-------------+------+-----+---------+----------------+
| id      | int(10)     | NO   | PRI | NULL    | auto_increment |
| keyname | varchar(30) | YES  |     | NULL    |                |
| imgh    | mediumblob  | YES  |     | NULL    |                |
| imgm    | mediumblob  | YES  |     | NULL    |                |
| imgl    | mediumblob  | YES  |     | NULL    |                |
+---------+-------------+------+-----+---------+----------------+

Code: Alles auswählen

mysql> select imgh from ordersprinter_prodimages where keyname = 'test';
+------+
| imgh |
+------+
|      |
+------+
1 row in set (0.00 sec)

Code: Alles auswählen

mysql> select imgh from ordersprinter_prodimages where keyname = 'Funky Cold Medina';
+------+
| imgh |
+------+
|      |
+------+
1 row in set (0.00 sec)

Und noch eine Korrektur. Meine 2. Installation ist nicht wie geschrieben CentOS, sondern Ubuntu LAMP on 16.04.

Könnte der leere Eintrag für imgh das Problem sein und wenn ja, warum ist er leer?

Gruß

Peter

[PCFreak]

Hallo Stefan,

sorry für die vielen Posts aber ich untersuche das Problem immer wieder mal so nebenbei.

Vielleicht kannst du dazu was sagen:

Code: Alles auswählen

[NOT OK] https://domain.tld/php/contenthandler.php?module=products&command=getprodimage&prodid=61&size=h
[OK]	 https://domain.tld/php/contenthandler.php?module=products&command=getprodimage&prodid=61&size=m
[OK]	 https://domain.tld/php/contenthandler.php?module=products&command=getprodimage&prodid=61&size=l

[OK]	 https://domain.tld/php/contenthandler.php?module=products&command=getprodimage&prodid=60&size=h
[OK]	 https://domain.tld/php/contenthandler.php?module=products&command=getprodimage&prodid=60&size=m
[OK]	 https://domain.tld/php/contenthandler.php?module=products&command=getprodimage&prodid=60&size=l

Es scheint so, dass für das Bild mit der ID 61 kein Image mit size h existiert.

In der Seite für die Bildzuweisung werden die Bilder ja mit ungefähr folgendem HTML-Code angezeigt:

Code: Alles auswählen

https://domain.tld/php/contenthandler.php?module=products&command=getprodimage&prodid=61&millis=1529390739639

hänge ich hier ein &size=m an, erhalte ich das Bild, mit &size=h nicht, was dem Fehlerbild entspricht.

Könnte es sein, dass die Upload-Routine hier was falsch gemacht hat und keinen Eintrag für imgh erstellt hat?


Wenn ich imgh manuell in die DB schreibe (einfach das gleich was unter imgl stand), wird das Bild in der Bildzuweisung angzeigt.


Rein logisch betrachtet vermute ich, dass beim Upload der Eintrag imgh nicht erstellt wurde - warum auch immer.

Gruß

Peter

[PCFreak]

Hallo Stefan,

Problem vmtl. weiter eingegrenzt.

In Zeile 1374 der products.php steht

Code: Alles auswählen

                $fn = $_FILES['imagefile']['tmp_name'];

                $imageh = self::scaleImg($fn, 300);
                $imageBaseh_64 = base64_encode($imageh);

                $imagem = self::scaleImg($fn, 150);
                $imageBasem_64 = base64_encode($imagem);

                $imagel = self::scaleImg($fn, 80);
                $imageBasel_64 = base64_encode($imagel);

                $pdo->beginTransaction();

Lädt man ein Bild hoch mit 400x400 pixel (png), wird dieses angezeigt. Probiert man ein Bild mit 100x100 (png), fehlt die Vorschau bei der Bildzuweisung aber das Bild funktioniert ansonsten im Rest von ordersprinter.

Meine Vermutung ist nun, dass

Code: Alles auswählen

                $imageh = self::scaleImg($fn, 300);

und u.U. auch die anderen scaleImg Aufrufe "in die Hose gehen", wenn das Bild nicht mindestens die Ausmaße hat, die mit scaleImg abgedeckt werden, deshalb wird auch wenn das Bild nur 100x100 ist, kein $imageh erstellt, bei 400x400 schon.
Würde heißen, dass hochgeladene Bilder mindestens größer als 300px sein müssten.

Die Routine, die da mit reinspielt (Zeile 1338 und folgende) ist vmtl:

Code: Alles auswählen

private static function scaleImg($fn,$maxDim) {
                list($width, $height, $type, $attr) = getimagesize($_FILES['imagefile']['tmp_name']);
                if ($width > $maxDim || $height > $maxDim) {
                        $size = getimagesize($fn);
                        $ratio = $size[0] / $size[1]; // width/height
                        if ($ratio > 1) {
                                $width = $maxDim;
                                $height = $maxDim / $ratio;
                        } else {
                                $width = $maxDim * $ratio;
                                $height = $maxDim;
                        }
                        $src = imagecreatefromstring(file_get_contents($fn));
                        $dst = imagecreatetruecolor($width, $height);
                        imagealphablending($dst, false);
                        imagesavealpha($dst, true);
                        $transparent = imagecolorallocatealpha($dst, 255, 255, 255, 127);
                        imagefilledrectangle($dst, 0, 0, $width, $height, $transparent);

                        imagecopyresampled($dst, $src, 0, 0, 0, 0, $width, $height, $size[0], $size[1]);
                        imagedestroy($src);
                        ob_start();
                        imagepng($dst); // adjust format as needed
                        $imagedata = ob_get_contents();
                        ob_end_clean();
                        imagedestroy($dst);
                        return $imagedata;
                }
        }

Leider kann ich kein PHP.

Was denkst du, bin ich auf der richtigen Spur?

Gruß

Peter

[PCFreak]

Hallo Stefan,

Fehler vmtl. gefunden:

Code: Alles auswählen

        private static function scaleImg($fn,$maxDim) {
                list($width, $height, $type, $attr) = getimagesize($_FILES['imagefile']['tmp_name']);
                // if ($width > $maxDim || $height > $maxDim) {
                if ($width > $maxDim || $height > $maxDim || 1 == 1) {
                        $size = getimagesize($fn);
                        $ratio = $size[0] / $size[1]; // width/height
                        if ($ratio > 1) {
                                $width = $maxDim;
                                $height = $maxDim / $ratio;
                        } else {
                                $width = $maxDim * $ratio;
                                $height = $maxDim;
                        }
                        $src = imagecreatefromstring(file_get_contents($fn));
                        $dst = imagecreatetruecolor($width, $height);
                        imagealphablending($dst, false);
                        imagesavealpha($dst, true);
                        $transparent = imagecolorallocatealpha($dst, 255, 255, 255, 127);
                        imagefilledrectangle($dst, 0, 0, $width, $height, $transparent);

                        imagecopyresampled($dst, $src, 0, 0, 0, 0, $width, $height, $size[0], $size[1]);
                        imagedestroy($src);
                        ob_start();
                        imagepng($dst); // adjust format as needed
                        $imagedata = ob_get_contents();
                        ob_end_clean();
                        imagedestroy($dst);
                        return $imagedata;
                }
        }

Ich habe einfach mal die Bedingung deaktiviert, die macht ja eh keinen Sinn oder?

Code: Alles auswählen

                if ($width > $maxDim || $height > $maxDim || 1 == 1) {

Und siehe da, es klappt. Ich sehe nun das Bild in der Bildzuweisung, allerdings natürlich hochskaliert auf 300px, aber so klappts.

Es müsste meiner Meinung nach entweder die Bedingung komplett raus oder dann halt das Bild in der Originalgröße eingefügt werden, wenn es kleiner ist als $maxDim.

Gruß

Peter

[PCFreak]

Hallo Stefan,

wie wäre folgender Fix?

ORIGINAL

Code: Alles auswählen

        private static function scaleImg($fn,$maxDim) {
                list($width, $height, $type, $attr) = getimagesize($_FILES['imagefile']['tmp_name']);
                if ($width > $maxDim || $height > $maxDim) {
                        $size = getimagesize($fn);
                        $ratio = $size[0] / $size[1]; // width/height
                        if ($ratio > 1) {
                                $width = $maxDim;
                                $height = $maxDim / $ratio;
                        } else {
                                $width = $maxDim * $ratio;
                                $height = $maxDim;
                        }
                        $src = imagecreatefromstring(file_get_contents($fn));
                        $dst = imagecreatetruecolor($width, $height);
                        imagealphablending($dst, false);
                        imagesavealpha($dst, true);
                        $transparent = imagecolorallocatealpha($dst, 255, 255, 255, 127);
                        imagefilledrectangle($dst, 0, 0, $width, $height, $transparent);

                        imagecopyresampled($dst, $src, 0, 0, 0, 0, $width, $height, $size[0], $size[1]);
                        imagedestroy($src);
                        ob_start();
                        imagepng($dst); // adjust format as needed
                        $imagedata = ob_get_contents();
                        ob_end_clean();
                        imagedestroy($dst);
                        return $imagedata;
                }
        }

FIXED ? - Abfrage auf Größe entfernt, Bedingung für ratio <1 eingebaut.

Code: Alles auswählen

        private static function scaleImg($fn,$maxDim) {
                list($width, $height, $type, $attr) = getimagesize($_FILES['imagefile']['tmp_name']);
                        $size = getimagesize($fn);
                        $ratio = $size[0] / $size[1]; // width/height
                        if ($ratio > 1) {
                                $width = $maxDim;
                                $height = $maxDim / $ratio;
                        }
                        if ($ratio < 1) {
                                $width = $maxDim * $ratio;
                                $height = $maxDim;
                        }
                        $src = imagecreatefromstring(file_get_contents($fn));
                        $dst = imagecreatetruecolor($width, $height);
                        imagealphablending($dst, false);
                        imagesavealpha($dst, true);
                        $transparent = imagecolorallocatealpha($dst, 255, 255, 255, 127);
                        imagefilledrectangle($dst, 0, 0, $width, $height, $transparent);

                        imagecopyresampled($dst, $src, 0, 0, 0, 0, $width, $height, $size[0], $size[1]);
                        imagedestroy($src);
                        ob_start();
                        imagepng($dst); // adjust format as needed
                        $imagedata = ob_get_contents();
                        ob_end_clean();
                        imagedestroy($dst);
                        return $imagedata;
        }

DIFF

Code: Alles auswählen

diff products.php products.org
1311a1312
>               if ($width > $maxDim || $height > $maxDim) {
1317,1318c1318
<                       }
<                       if ($ratio < 1) {
---
>                       } else {
1336a1337
>

Hab es momentan nur mit quadratischen Bildern getestet, ggf. muss noch ein wenig dazuprogrammiert werden, wie gesagt, dafür "spreche" ich zu wenig PHP.

Gruß

Peter