✔ Tatsächliche Anzeigegröße von Bild

[Carrear]

Hi Leute

ich habe eine kurze Frage. Ich bin mir bei meinen Gedanken nicht ganz sicher, ob das überhaupt per PHP erfragt werden kann, aber mal sehen:

Man hat ja die Möglichkeit über $img_info = getimagesize('./example.jpg'); die Höhe und die Breite einer Bilddatei in Pixeln in ein Array zu speichern. Ist es aber auch Möglich die tatsächlich dargestellte Größe innerhalb PHP'S anzufragen?

Ich habe hier ein CMS vorliegen in dem die unerfahrenen Benutzer gerne per HTML Angaben width="" und height="" oder per CSS die Höhe und die Breite angeben. Ich möchte diese Angaben gerne vergleichen mit der Originaldatei - um dann zu sehen ob diese größer ist und nur wenn sie größer ist, dann soll ein rel Attribut ausgegeben werden um per JS eine Lightbox mit dem Element zu verknüpfen.

Im Prinzip ist das alles funktionstüchtig, WENN ich von 2 Dateien ausgehe und die tatsächliche Dateigröße vergleiche. Aber jetzt muss ich es wie eben beschrieben so machen, dass es nur eine Datei ist und die AUSGABEGRÖßE verglichen wird mit der tatsächlichen Größe der Datei in Pixeln.

Habt ihr eine Ahnung wie ich an diese Angaben komme?

Viele Grüße

Hier mal eben die bisherige Funktion

<img src="./img/colors.jpg" <?php check_ifbig('colors.jpg'); ?> alt="">

<?php

function check_ifbig($dateiname) {

  $img = $dateiname;
  $bimg = 'big_'.$img;

  $img_path = './img/'.$img;
  $bimg_path = './img/'.$bimg;

  if(file_exists($bimg_path)) {
      $img_array = getimagesize($img_path);
      $bimg_array= getimagesize($bimg_path);
    
      if ($bimg_array[0] > $img_array[0] OR $bimg_array[1] > $img_array[1]) {
          echo " rel=\"lightboy-gallery\" ";
      } else {
          echo "Das angegebene Bild ist kleiner als das Original";
      }
  } else {
      echo "Kein Großes Bild vorhanden oder falsche Benennung.";
  }
  
}
?>

 

[Maniac]

Da PHP auf dem Server ausgeführt wird, ist das ermitteln von DOM-Elementen nicht möglich. Dieses müsstest du mit JavaScript abfragen, dann mit AJAX einen Request zu deiner PHP-Funktion starten und als Rückgabe die Ausgabe deiner Funktion.

Mit jQuery ist das ziemlich einfach:

var imgWidth  = $('img').attr('width');
var imgHeight = $('img').attr('height');

$.post('datei.php', {height: imgHeight, width: imgWidth}, function(data){
   alert(data);
});

in der datei.php prüfst du ob der POST-Request angekommen ist, wenn ja hast du 'height & width' im POST-Array enthalten. Dies kannst du dann deiner Funktion übergeben.

 

[Carrear]

Okay, also ich verstehe prinzipiell die vorgehensweise, aber weiß ehrlich gesagt nicht wie es umzusetzen ist. Das dort oben fragt erst einmal die ANGEZEIGTE höhe und breite des Bildes ab und speichert die zahlenwerte in variabeln.das darunter und was du mit der datei.php und der Post Request erklärt hast verstehe ich noch nicht. Kannst du es noch weiter erläutern bitte?

 

[chmee]

Man könnte jene Abfrage auch komplett in JS machen, indem man das Bild vorlädt, die Attribute dieses Bildes ausliest und dann mit den Infos aus der DOM vergleicht. Anhand des Projekts müsste man überlegen, welche Art besser geeignet ist.

mfg chmee
..nach JS verschoben..

 

[Maniac]

Das war nur ein Beispiel, dazu benötigt man die Javascript-Library jQuery.

$.post()

sendet einen AJAX-Request zu der angegeben Datei.

 

[Carrear]

Okay, super Tipps. Ich experimentiere jetzt erst einmal ein bisschen rum mit den neuen Infos und dann schauen wir weiter Wenn ich nicht weiter komme wende ich mich vertrauensvoll an euch ;D

Achsoo - ich kann dann in der PHP Datei wenn das request angekommen ist mit den variablen $_POST['height'] und $_POST['width'] arbeiten?

 

[Maniac]

Thats right!

Hier noch eine kleine Hilfe: http://api.jquery.com/browser/

 

[Carrear]

Naja, nach dieser Erkenntnis ergibt sich eine neue Frage Zumeist muss man ja solche JavaScript Sachen im Head Bereich machen, richtig? Meine PHP Funktion konnte ich schön das aufrufen wo ich sie gebraucht habe: Innerhalb des Image-Tags habe ich sie aufgerufen, dementsprechen findet auch an dieser Stelle meine Ausgabe des Attributes statt, wenn die Konditionen erfüllt sind. Wie läuft das hier?

 

[Maniac]

Sie müssen nicht im Heead stehen, dies kannst du auch bei deinem Code machen. Du kannst die Ausgabe des Requests an ein HTML-Element weitergeben, so das es angezeigt wird.

 

[Carrear]

Super!

Dann kann ich bestimmt auch den Dateiname abfragen so inder Art hier:

var imgName = $('img#detailbild').attr('href');

?