OrginalGröße einer jpg Datei ermitteln

Hilfe!

Das ist schoen und gut und funktioniert auch, sofern das Bild im HTML-Code schon
existiert hat.

Wenn ich jetzt aber mein Bild in JS mit
Code: 
img = new Image();
img.src = mysrc;
anlege, dann sind width und height == 0 !

Waere super, wenn mir da jemand weiterhelfen koennte!

Zur Erklaerung: Ich moechte ein neues Browserfenster oeffnen, das genauso gross ist, dass das Bild perfekt reinpasst. Dabei moechte ich aber auf PHP usw. verzichten.

Thanks in advance :)

andy
 
Du musst dem Browser bei dieser Methode etwas Zeit geben....diese Eigenschaften sind erst verfügbar, wenn das Bild komplett geladen ist.
 
Lool.

Das heisst ich muss erst einmal einen event-handler auf das Bild ansetzen,
dann setze ich die Source und sage document.images[ document.images.count ] = img;

und dann oeffne ich ERST in dem event-handler das Fenster mit dem Bild. Habe ich
das richtig verstanden :) ?

Gruss
 
Jo...ich glaub schon:)

Bei Bildern bietet sich "onload" an.... z.B. so:

Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function bildeigenschaften(objImg)
{
    bild=new Image();
    bild.src=objImg.src;
    alert(bild.src+':\nBreite:'+bild.width+'\nHöhe:'+bild.height);
}
//-->
</script>
</head>
<body>
<img src="bild.jpg"onload="bildeigenschaften(this)"width="100"height="100">
</body>
</html>

dem Bild wurde per HTML Breite und Höhe zugewiesen.
Würdest du dies jetzt direkt abfragen, würde 100x100 das Ergebnis sein, auch wenn es eine andere Grösse hat.

Beim onload des Bildes wird mit JS ein neues Image-Objekt erstellt, mit der Adresse des eingebundenen Bildes als src.

Wenn man nun die Abmaße des JS-Image-Objektes abfragt, erhält man die Originalgrösse, unabhängig davon, was im HTML steht.
 
Ich HASSE JavaScript!

Das ist echt zum Auswachsen!
Ob sich die diversen Browser-Hersteller mal auf Standards festlegen koennen :( ?

Ich brauche wieder Hilfe...
da das mit dem Image-Preload nicht wirklich funktioniert hat, habe ich beschlossen einen
anderen - meiner Meinung nach saubereren Weg zu gehen:

Ich lade in das Popup-Fenster nicht das Bild, sondern ich lade eine HTML-Seite, die
ein Bild-Tag drin hat und ein JavaScript.
Das JavaScript passt jetzt die Groesse des Fensters an die Groesse des Bildes an:

Code: 
      // passt die Fenstergroesse an die des aufrufenden Objektes an
      function resize_win( sender )
      {
        window.innerWidth = sender.width + border;
        window.innerHeight = sender.height + border;
      }
      
      // laedt das entsprechende Bild in den Image-Tag
      function set_pic( url )
      {
        url = url.substr( 1, url.length -1 );        
        pic = document.getElementById( "galerie_pic" );
        pic.src = url;
      }

      [...]
      <body onLoad="set_pic( window.location.search );">
      [...]
      <img src=[...] onLoad="JavaScript:resize_win(this);" />


Jetzt funktioniert der ganze Spass im Mozilla/Firefox ausgezeichnet, nur der IE will nicht.

Wer kann mir weiterhelfen, warum dieser *#&$&@-Browser das nicht macht?

Danke schonmal vielmals!

schoenen Gruss,
Andy
 
Aber gerne ...

diese Seite wird ueber den weiter unter folgenden Link aufgerufen:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>acryl company - Produktgalerie</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="../global/content.css" />
    
    <script language="javascript" type="text/javascript">
    <!--
      var border = 60;
      
      // passt die Fenstergroesse an die des aufrufenden Objektes an
      function resize_win( sender )
      {
        window.innerWidth = sender.width + border;
        window.innerHeight = sender.height + border;
      }
      
      // laedt das entsprechende Bild in den Image-Tag
      function set_pic( url )
      {
        url = url.substr( 1, url.length -1 );        
        pic = document.getElementById( "galerie_pic" );
        pic.src = url;
      }
    
    -->
    </script>
  </head>
  <body onLoad="set_pic( window.location.search );">
  
  <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="center">
        <img src="./bilder/default.jpg" alt="Produkt-Bild" id="galerie_pic" border="0" onLoad="JavaScript:resize_win(this);" />
      </td>
    </tr>
    <tr>
      <td align="right" height="1"><a href="JavaScript:window.close();">Fenster schlie&szlig;en</a></td>
    </tr>
  </table>
    
  </body>
</html>

Code: 
var galerie_pic_src = "./galerie/?./bilder/{id}.jpg";
var galerie_link_href="JavaScript:bsp_newindow('{src}','galerie','width=460,height=80%,align=left,valign=top,dependent=yes,menubar=no,resizable=yes,status=no,toolbar=no,scrollbars=yes');";

function galerie_prepare_pic( id )
{
  if (! galerie_link )
    galerie_link = document.getElementById( galerie_link_id );
    
  href = galerie_link_href.replace( /{src}/, galerie_pic_src.replace ( /{id}/, id ) );
  
  galerie_link.href = href;
}
 
Mmmh....hätt ich richtig gelesen, hätte dein anderer Code zur Eingrenzung des Problems gereicht.
Es ist recht simpel...der IE kennt innerWidth/innerHeight überhaupt nicht.

Workaround:
vergleiche die Werte, welche du erreichen willst, mit den Eigenschaften offsetHeight/offsetWidth des <body>.
Anhand der ermittelten Differenz kannst du mit der Methode "resizeBy()" die Fenstergrösse entsprechend anpassen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück