[JS] - Dimensione in pixel di un immagine

**cichity74** · 04-02-2005, 22:36

Vorrei verificare la dimensione delle immagini prima dell'upload in modo da impedire all'utente di uplodare una img inferiore a 80px X 80px.
Credo che l'unico modo sia tramite java script ma non so come

Grazie anticipatamente per i suggerimenti
cichity74

**Mich_** · 07-02-2005, 11:05

Una bozza:

codice:

function verifica_dim() {
  var imm = new Image();
  imm.src = document.NOMEFORM.NOMECAMPOFILE.value;
  /* qui occorre attendere il completamento del caricamento*/
  var w = imm.width;
  var h = imm.height;
 ...
}

**cichity74** · 14-02-2005, 16:00

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test dim img</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Trebuchet MS, Verdana, Arial;
	font-size: 12px;
}
-->
</style>

<script language="javascript" type="text/javascript">
<!-- // 
	function verifica_dim() {
		var imm = new Image();
		imm.src = document.form_1.immagine.value;
		/* qui occorre attendere il completamento del caricamento*/
		var w = imm.width;
		var h = imm.height;
	}
// -->
</script>  
</head>
<body>
Test dim Img:
<form action="" method="POST" enctype="multipart/form-data" name="form_1" id="form_1">
	<input name="immagine" type="file" />
    <input name="submit" type="submit" value="Invia" />
</form>
Img:
<form action="" method="POST" name="form_2" id="form_2">
<textarea name="dim_img" cols="20" rows="4"></textarea>
</form>
</body>
</html>

Come posso mettere a video i valori (w,h) dell'immagine nella text area din_img, vorrei poter visualizzare i valori in modo da testare l'effettivo funzionamento dello script

cichity74

**Mich_** · 14-02-2005, 16:12

per il test ti basta un alert:

codice:

function verifica_dim() {
  var imm = new Image();
  imm.src = document.form_1.immagine.value;
  /* qui occorre attendere il completamento del caricamento*/
  var w = imm.width;
  var h = imm.height;
  alert("dimensioni: "+w+" x "+h);
}

Per scriverle in un campo puoi usare (asieme o al posto dell'alert):
document.form_2.dim_img.value = "dimensioni: "+w+" x "+h;

**cichity74** · 14-02-2005, 16:34

codice:

<script language="javascript" type="text/javascript">
<!-- // 
	function verifica_dim() {
		var imm = new Image();
		imm.src = document.form_1.immagine.value;
		var w = imm.width;
		var h = imm.height;
		alert("dimensioni: "+w+" x "+h);
		document.form_2.dim_img.value = "dimensioni: "+w+" x "+h;
	}
// -->
</script>

Non mi da nulla ha video :master:
forse perché non richiamo la funzione verifica_dim()
come posso richiamare la funzione all'avvenuta pressione del tasto invia

cichity74

**Mich_** · 14-02-2005, 16:44

Fare un funzione che parte con un tasto non e` cosa facile.

Conviene mettere un link o un button che fa partire la funzione:
verifica dimensione

<button onclick="verifica_dim();" value="verifica dim" />

(probabilmente funziona solo al secondo click)

**cichity74** · 14-02-2005, 16:59

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test dim img</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Trebuchet MS, Verdana, Arial;
	font-size: 12px;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!-- // 
	function verifica_dim() {
		var imm = new Image();
		imm.src = document.form_1.immagine.value;
		var w = imm.width;
		var h = imm.height;
		alert("dimensioni: W= "+w+" H= "+h);
		/* document.form_2.dim_img.value = "dimensioni: "+w+" x "+h; */
	}
// -->
</script>  
</head>
<body>
Test dim Img:
<form action="" method="POST" enctype="multipart/form-data" name="form_1" id="form_1">
	<input name="immagine" type="file" />
    <input name="submit" type="submit" value="Invia" onclick="verifica_dim();" />
</form>
</body>
</html>

In questo modo ho risolto l'invio e il richiamo della funzione ma continua a restituirmi W=0 e H=0 come se non leggesse la dimensione del img :master:

**Mich_** · 14-02-2005, 17:37

Originariamente inviato da cichity74
In questo modo ho risolto l'invio e il richiamo della funzione ma continua a restituirmi W=0 e H=0 come se non leggesse la dimensione del img :master:

Lo immaginavo. Infatti non aspetti che l'immagine sia caricata.
Hai provato a chiamare la funzione due volte con gli stessi parametri?

Prova anche a mettere l'istruzione
var imm = new Image();
fuori dalla funzione (prima della riga function) e a chiamare la funzione due volte.

**cichity74** · 14-02-2005, 17:54

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test dim img</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Trebuchet MS, Verdana, Arial;
	font-size: 12px;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!-- //
 var imm = new Image();
	function verifica_dim() {
		imm.src = document.form_1.immagine.value;
		var w = imm.width;
		var h = imm.height;
		alert("root_img: "+imm.src);
		alert("dimensioni: W= "+w+" H= "+h);
		/* document.form_2.dim_img.value = "dimensioni: "+w+" x "+h; */
	}
// -->
</script>  
</head>
<body>
Test dim Img:
<form action="" method="POST" enctype="multipart/form-data" name="form_1" id="form_1">
	<input name="immagine" type="file" />
	verifica dimensione 
    <input name="submit" type="submit" value="Invia" onclick="verifica_dim();" />
</form>
</body>
</html>

Ho fatto i test che mi hai suggerito ma nada

ho aggiunto un alert per verificare il percorso dell'img (ed è corretto) pur dichiarando var imm = new Image(); fuori dalla funzione e richiamandola 2 volte NON funziona.
:master:

cichity74

**Mich_** · 14-02-2005, 18:02

Prova a far caricare l'immagine al blur del campo:
<input type="file" .... onblur="imm.src=this.value;" />

E togli imm.src = ... dallo script.

Dovrai anche aspettare che il caricamento sia completo prima di fare il calcolo (meno di 1 sec per immagini piccole).

Discussione: [JS] - Dimensione in pixel di un immagine

Strumenti discussione

Ricerca discussione

Visualizza

[JS] - Dimensione in pixel di un immagine

Permessi di invio