Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

marcolino

Pega largura e altura da imagem no input

Por , em Javascript

Recommended Posts

marcolino    0

marcolino
Postado

Galera eu tenho esse javascritp que mostra a imagem assim que a pessoa carrega ela no input, porem a largura e altura é determinada pelo html.

Tem como fazer com que mostre a imagem no tamanho proporcional do arquivo original. Tipo: se a imagem é 400(w)x600(h) (vertical) -> mostra img. 200(w)x300(h)(vertical).

 

OU SEJA eu tenho que passar a largura e a altura para a função e calcular a proporção, mas não sei fazer.

 

Script que eu tenho:Aqui

Obs: não funciona no firefox, só no IE.

 

FUNÇÃO que eu usei:

<script language="javascript">	function image(dir)	{ 	document.form1.imagem.src=dir;	}</script>

CÓDIGO do input:

<input name="foto" type="file" id="foto" size="50"  onChange="image(this.value)"/>

Compartilhar este post

Link para o post
Compartilhar em outros sites

benck    2

benck
Postado

Cara, dessa vez não tem entendi direito... você precisa mesmo calcular o tamanho proporcional da imagem? Não é mais fácil tirar o width e o height da tag da imagem?

 

Agora tah assim

 

<img src="image.gif" name="imagem" width="300" height="200" id="imagem">

muda pra ficar assim

 

<img src="image.gif" name="imagem" id="imagem">

Valeu!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcolino    0

marcolino
Postado

Cara, ajudou um pouco. O problema é que se a pessoa mandar carregar uma imagem 2000x3000px ai vai ficar enorme na página. Por isso pensei em dimini-la proporcionalmente.Tem como eu pegar a largura e a altura da imagem e passar para função?

Compartilhar este post

Link para o post
Compartilhar em outros sites

benck    2

benck
Postado

Cara, comecei a fazer o código para tu ter uma noção de como + ou - fazer...

 

Ai vai o q eu fiz, agora é só adaptar pra que tu quiser

 

Vê se te ajuda

 

<html xmlns="http://www.w3.org/1999/xhtml"><head><script language="javascript">	function image(dir){		document.getElementById('imagem').src = dir;		// Verifica se a altura não ultrapassou o permitido		if(document.getElementById('imagem').height > 300) {			redimenciona(300);		}	}	function redimenciona(novaaltura) {		var imagem	 = document.getElementById('imagem');		var altura	 = imagem.height;		var largura	= imagem.width;		var percentual = largura * 100 / altura;		imagem.height = novaaltura;		imagem.width  = novaaltura * percentual / 100;	}</script><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Mostra imagem</title><style type="text/css"><!--body,td,th {	font-family: Tahoma, Verdana, Trebuchet MS, Arial;	color: #000000;	font-size: 11px;}--></style></head><body><form name="form1" method="post" action="">  <table width="500" border="0" cellspacing="2" cellpadding="2">	<tr>	  <td colspan="2" align="center"><span class="Texto"><img src="http://www.net-midia.com/imasters/mostraimg/image.gif" name="imagem" id="imagem"></span></td>	</tr>	<tr>	  <td width="105" align="right">Foto:</td>	  <td width="381"><label>		<input name="foto" type="file" id="foto" size="50"  onChange="image(this.value)"/>	  </label></td>	</tr>	<tr>	  <td align="right"> </td>	  <td> </td>	</tr>  </table></form></body></html>

Valeu!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcolino    0

marcolino
Postado

olá...posso estar falando besteira, mas nao eh soh colocar o width e nao colocar o heigt q ele redimensiona automático?GoodSpeed ;)

Cara não é que deu certo. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif Valew pela ajuda benck, aprendi um monte de coisa só nesse seu codigo. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito