Newsgroup: it.comp.lang.javascript
Titolo: Come leggere la dimensione di una immagine?

Buongiorno,
ho bisogno di un piccolo aiuto, dunque... dovrei leggere le dimensioni di
una immagine (gif o jpg) e passarle poi al mio script (javascript) per
crearmi una finestra indipendente dove caricare quella immagine dopo averla
selezionata da un elenco.
Sarei grato se qualcuno potesse aiutarmi a risolvere questo problema.
Ringrazio in anticipo, I. Marcello.

 ha scritto nel messaggio
news:AjLB8.12666$CN3.4...@news2.tin.it...

Puoi fare cosi', tra l'altro funge da preload:
var winW,winH;
function getSize(){
    winW = objImage.width;
    winH = objImage.height;
}
var objImage = new Image();
objImage.onload=getSize;
objImage.src=tuoPercorso;
Ciao

Ok tii ringrazio,
solo una cosa, quali parametri dovrei passare alla funzione che apre la
finestra, quando mi chiede di mettere le dimensioni X e Y di quest'ultima?
I Marcello.



winW e winH sono rispettivamente la larghezza e l'altezza dell'immagine in
questione, quindi in linea teorica le dimensioni della tua finestra.
Dico in linea teorica perché diversi browser si comportano in diverse
maniere per quanto riguarda i margini interni della finestra: regolati di
conseguenza.
Ciao

 Puoi fare cosi', tra l'altro funge da preload:
gh gh gh.. :)
-- 
C'ya,
ZER0
  :. job profile - coder.gfxer.webDesigner
"Quanti angeli danzano sulla punta di uno spillo?"

Ciao Ragazzi,
prendendo spunto dalla risposta di Andrea, ho scritto il seguente script:
function getimage(image) {
 var objImage = new Image();
 objImage.src = image.options[image.selectedIndex].value;
 searchWin = window.open(objImage.src, 'image', 'scrollbars=no,
resizable=no, width=objImage.width, height=objImage.height, status=no,
location=no, toolbar=no');
 }
Ho solo due problemi;  intanto in SEARCHWIN, i valori che passo a  WIDTH ed
HEIGHT rispettivamente tramite OBJIMAGE.WIDTH ed OBJIMAGE.HEIGHT non vengono
letti o quanto meno non nel modo corretto visto che mi apre sempre una
finestra a tutto schermo con l'immagine XYZ che passo tramite il parametro
IMAGE.
Come posso risolvere il problema?
Il secondo problema infine, è che a finestra aperta, devo eliminare anche il
rientro, vale a dire che l'immagine XYZ deve essere caricata perfettamente
nella finestra SEARCWIN senza lasciare zone vuote.
Confido in voi per una risposta a questi due problemi.
Vi ringrazio, I. Marcello

 nella finestra SEARCWIN senza lasciare zone vuote.
Non ho tempo di fare prove, ma a memoria non credo che tu ce la faccia con
tutti i browser ad andare "a filo", ti conviene fare prove e cercare, dove
non è possibile, di prevedere almeno dei margini uguali.
Ciao

Dunque riposto il codice nuovamente qui sotto.
Ho verificato con:
document.write (winW)  e winH   e i valori della dimensione della immagine
sono passati correttamente infatti io visualizzo per esempio:
(per:  document.write (winW)  ) ==> 100
(per:  document.write (winH)   ) ==> 23
ed è quello che volevo.
Però quando passo queste variabili a:  SearchWin, vedi codice, non me li
imposta secondo le dimensioni che dovrebbe nel nostro esempio 100 x 23 ma
imposta a tutto schermo.
Mentre se inserisco al posto di winH e winW dei valori numerici, funziona
correttamente.
In sostanza, non legge correttamente il valore numerico che passo a winH e
winW, e in tal caso come devo fare per risolvere il problema?
Ringrazio anticipatamente chi mi saprà risolvere il problema.
I. Marcello.
----------------------------------------------------------------------------
---
var objImage = new Image();
var winW,winH;
function getSize(){
    winW = objImage.width;
    winH = objImage.height;
}
function getimage(image) {
   objImage.onload=getSize;
   objImage.src=image.options[image.selectedIndex].value;
   searchWin =
window.open(objImage.src,'image','scrollbars=no,resizable=no,width=winW,heig
ht=winH,status=no,location=no,toolbar=no');
 }

 ht=winH,status=no,location=no,toolbar=no');
Scusa ma prima ti ho risposto in fretta vedendo l'assenza del gestore di
eventi (che devi comunque mettere, altrimenti ti funziona solo in locale
dove il processo è praticamente immediato).
L'altro errore è che tu stai passando le stringhe winW e winH alla funzione,
non il loro valore:
window.open(objImage.src,'image','scrollbars=no,resizable=no,width='+winW+',
height='+winH+',status=no,location=no,toolbar=no');
Passando objImage.src come url non risolverai mai il problema dei margini:
metti l'immagine in una pagina html e apri quella con window.open
Ciao

Ciao Andrea,
ho risolto il problema dei margini con la pagina html anche se in effetti
ero partito dal presupposto di evitare l'uso della pagina html, cmq va bene
anche cosi.
Per quanto riguarda il primo problema, ovvero nella riga:
window.open(objImage.src,'image','scrollbars=no,resizable=no,width='+winW+',
height='+winH+',status=no,location=no,toolbar=no');
anche con questa modifica, mi imposta le dimensioni della finestra come se
fossero a schermo intero :( e quindi non è ancora risolto :(
La logica è giusta ma non capisco l'errore, si vero non avevo pensato al
fatto che i numeri potessero essere passati come stringa, ma in tal caso ci
vorrebbe una funzione che converta la stringa in numero.
Personalmente sapevo che questo non era necessario in quanto il javascript
riconosceva le stringhe come stringhe e i numeri come i numeri...
evidentemente ho frainteso io.
Comunque te ne sarei ancora grato se mi aiutassi nuovamente.
Ti ringrazio ancora, Marcello.

 Ti ringrazio ancora, Marcello.
Mi hai frainteso: tu stavi passando le lettere "w", "i", "n", "W" alla
funzione e non il valore della variabile winW (che in questo caso poco
importa che sia stringa o numero, basta che contenga un numero).
Detto questo non capisco dove stia l'ulteriore errore.
Prova a postarmi il codice completo della pagina.
Ciao
Andrea

Dunque ecco il codice:
----------------------------------------------------------------------------
--------------------------------------------------
<html>
<head>
<script language="JavaScript">
var winW,winH;
function getSize(){
    winW = objImage.width;
    winH = objImage.height;
}
function getimage(image) {
  filename=image.options[image.selectedIndex].value;
  var objImage = new Image();
  objImage.onload=getSize;
  objImage.src=filename;
window.open('members/'+filename,'image','scrollbars=no,resizable=no,width='+
winW+',height='+winH+',status=no,location=no,toolbar=no');
 }
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="Layer10" style="position:absolute; width:132px; height:65px;
z-index:10; left: 7px; top: 380px">
  <div align="center">
<form name="form1">
      <select name="image">
        <option value="foto1.htm">foto 1</option>
        <option value="foto2.htm">foto 2</option>
        <option value="foto3.htm">foto 3</option>
      </select>
      <input type="submit" name="Submit" value="Ok"
onclick="getimage(image)">
    </form>
  </div>
</div>
</body>
</html>
----------------------------------------------------------------------------
--------------------------------------------------
Le foto stanno ovviamente dentro la cartella: members.
In sostanza mi apre l'immagine correttamente, ma non ridimensiona la
finestra in funzione della dimensione dell'imagine.
Prova il codice cosi vedrai meglio cosa intendo dire.
Ti ringrazio ancora una volta per la tua disponibilità,
Marcello.

 Marcello.
Dunque, ti segnalo due errori e aggiungo un consiglio:
- stai assegnando come src di objImage il percorso di una pagina html e non
di un'immagine, ergo niente dimensioni
- stai passando un riferimento errato all'oggetto select (image è "vago")
- consiglio: ti conviene gestire l'evento onsubmit del form non il click sul
pulsante (se premo invio all'interno del modulo l'evento non viene
scatenato)
Per quanto riguarda objImage.src basta assegnare il percorso dell'immagine,
per l'evento:
<form action="#" name="form1" onsubmit="getimage(this.image)">
e aggiungi un "return false;" alla fine della funzione getimage.
Ciao

 Dunque, ti segnalo due errori e aggiungo un consiglio:
Oltre a quanto detto da Andrea vorrei aggiungere, se mi è permesso:
 - la variabile objImage è definita all'interno della funzione getimage().
Si dovrebbe definire come variabile globale, altrimenti non sarà
riconosciuta in getSize().
- l'istruzione "window.open('members..." potrebbe essere eseguita prima che
l'immagine sia caricata completamente e quindi niente dimensioni. Se si
spostasse come ultima istruzione di getsize() sarebbe meglio.
Maurizio.

 Maurizio.
Più che giusto, e senza condizionale: sarebbe un errore richiamarla lì.
Meno male che qualcuno sopperisce alle mie distrazioni...

scusate se mi permetto.. ho provaro cosi
var objImage = new Image();
var immgW,immgH;
objImage.src=immg;
objImage.onload;
immgW = objImage.width;
immgH = objImage.height;
alert(immgW);
alert(immgH);
window.open("","Glossary","Toolbar=no,location=no,directories=no,status=no,m
enubar=no,scrollbars=yes,resizable=1,width='+immgH+',height='+immgH+'");
con alert mi da i valori.giusti.. poi invece  mi apre una finestra grande..

 objImage.onload;
objImage.onload, scritto cosě, non ha alcun significato; devi specificare la
funzione che deve essere richiamata al termine del caricamento
dell'immagine, cosě:
    objImage.onload = funzione;
Tutte le istruzioni che seguono debbono essere eseguite al termine del
caricamento dell'immagine e devono essere spostate all'interno della
funzione.
Maurizio.

function getSize(objImage)
{
immgW = objImage.width;
immgH = objImage.height;
defwin=window.open("","Glossary","Toolbar=no,location=no,directories=no,stat
us=no,menubar=no,scrollbars=yes,resizable=1,width='+immgW+',height='+immgH+'
");
defwin.document.open();
defwin.document.write(' ...........');
defwin.document.close()
}
function popdef(immg)
{
objImage = new Image();
objImage.src=immg;
objImage.onload=getSize(objImage);
}
in immg passo src della foto....ma mi da un errore del tipo
errore Non implementato
dovč che sbaglio.?
Grazie

 Grazie
objImage.onload=getSize;
Questa riga deve *assegnare* una funzione allo scatenarsi dell'evento, non
chiamarla.
Mi raccomando: objImage deve essere una variabile globale, altrimenti
getSize non riceve nulla.
Ciao

Errata corrige:
volevo dire che getSize non ha nulla da utilizzare come oggetto immagine.
Se la variabile è globale non gli deve essere passata.
Saludos

vi scrivo il codice...
nel file html ho messo...
var objImage = new Image();
var immgW =0;
var immgH =0;
e l richiamo la funzione  onclick="popdef(0,'Titolo','../images/prova.jpg')
mentre nel file *.js esterno ho scritto
function getSize()
{
immgW = objImage.width;
immgH = objImage.height;
}
function popdef(n,titolo,immg,nota1,nota2,offset)
{
objImage.src=immg;
objImage.onload=getSize;
word='<p class=\"nota\" align=\"center\"><img src='+immg+'> <i><br><font
color=\"#660000\"><b>'+nota1 +</b></font></i>'+nota2+'</p>';
alert(immgW);
alert(immgW);
defwin=window.open("","Glossary","Toolbar=no,location=no,directories=no,stat
us=no,menubar=no,scrollbars=yes,resizable=1,width='+immgW+',height='+immgH+'
");
defwin.document.open();
defwin.document.write('<html><head><title>'+titolo+'</title><LINK
REL=\"stylesheet\" TYPE=\"text/css\" HREF=\"../css/stili.css\"
TITLE=\"rolloversheet\"></head><body>');
defwin.document.write(word);
defwin.document.write("</body></html>");
defwin.document.close()
clearID=defwin.setTimeout("self.close()",3000);
}
mi dite perche mi apre una grande finesta...h notato che la prima volta i
valori sono 0,0 mebtre la seconda volta sono le dimenzioni dell'immagine
Non voglio fare il preload ma si deve caricare solo su richiesta ...
Grazie..spero che mi aiutate ... sto  impazzendo ;-)

 Grazie..spero che mi aiutate ... sto  impazzendo ;-)
objImage.onload non aspetta che l'immagine sia caricata prima di proseguire
nel codice, ma definisce cosa fare quando sarà caricata.
La prima volta la tua finestra si apre male, la seconda volta, con
l'immagine in cache si apre con le dimensioni giuste.
La soluzione è nel non aprire la window nella stessa funzione.
Se la scelta dell'immagine da caricare è dell'utente metti window.open alla
fine di getSize.
Ciao