Ir para conteúdo

Arquivado

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

AlexandreHenrique

capturar largura e altura da imagem clicada

Recommended Posts

Olá amigos estou tentando capturar o tamanho real (width, height) das imagens que compõem meu álbum de fotos.

Ao clicar na imagem preciso capturar altura e largura,  já tentei de várias formas mas, o valor que retorna não é o tamanho real, apenas é repetido o valor da primeira imagem do array;

Veja online: http://www.via85.tk/photos/

As 3 imagens do álbum têm os  tamanhos abaixo que preciso capturar:

Natural
200 x 252
259 x 194
1024 x 683


 

Meu código está assim:

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Album</title>
		<style>
			.img{
			height:80px;
			float:left;
			margin:1px;
			}
			.imgBig{
			width:auto;
			height:300px;
			float:left;
			display:block;
			}
		</style>
	</head>

	
	<body>
		<div id="boxAlbum">
			<script>
				var path = "img/";
				
				var img = ["panicat.jpg","por.jpg","azul.jpg"];
				
				var i = 0;
				var tam = img.length; 
				
				function mostraImagem(){
					while (i < tam) {
						document.write('<img class="img" onclick="abreImg(alt);" alt="' +img[i]+ '" id="imagem" src="' +path+img[i]+ '">');
						i++;	
					}	
				}
			</script>
		</div>
		
		<!-- lista miniaturas -->
		<script>mostraImagem();</script>
		<!-- Exibe imagem ampliada -->
		<script>document.write('<img class="imgBig" id="imgBig" src="">');</script>
		
	<script>
	function abreImg(valor) {
		var img = document.getElementById('imagem').innerHTML=valor;
		var altura = document.getElementById("imagem").height;
		var largura = document.getElementById("imagem").width;
		alert(img + "\nAltura: "+altura+"\nLargura: "+largura);
	}
	</script>	
		
	</body>
	
</html>	

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
var img = document.getElementById('imagem');
var iH = img.offsetHeight;
var iW = img.offsetWidth;
alert('Altura: ' + iH + ' / Largura: ' + iW);

Seria isso?

 

Só mais uma coisa, porque só olhei por rapido o código, me parece que você quer exibir 3 imagens com ID imagem o que vai dar erro, porque nunca se pode ter mais de 1 identificador por página.

O HTML ou javascript só pode interpretar 1 identificador, pois é para isso que eles servem distinguir uma coisa da outra.

Compartilhar este post


Link para o post
Compartilhar em outros sites

no html você não pode repetir o atributo id, esse é o seu erro.

não mexi muito no teu script original. Mas tente não usar document.write é uma má prática.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Album</title>
  <style>
    .img{
      height:80px;
      float:left;
      margin:1px;
    }
    .imgBig{
      width:auto;
      height:300px;
      float:left;
      display:block;
    }
  </style>
</head>

<body>
<div id="boxAlbum">
  <script>
    var path = 'img/';
    var img = ['mickey.png','minnie.jpg'];
    var i = 0;
    var tam = img.length;
    function mostraImagem(){
      while (i < tam) {
        var url = path + img[i]
        document.write('<img class="img" onclick="abreImg(\'' + url + '\');" alt="' + url + '" src="' + url + '">');
        i++;
      }
    }
  </script>
</div>
<!-- lista miniaturas -->
<script>mostraImagem();</script>
<!-- Exibe imagem ampliada -->
<script>document.write('<img class="imgBig" id="imgBig" src="">');</script>
<script>
function abreImg(src) {
  var img = new Image()
  img.src = src;
  img.onload = function() {
    alert(img.src + "\nAltura: "+img.height+"\nLargura: "+img.width);
  }
}
</script>
</body>
</html>

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por LucasLV
      Olá.
      Tenho um site onde as imagens são geradas através de um arquivo PHP - utilizo esse método para retornar imagens webp ou jpg - e vi que o navegador não utiliza, ou não salva em cache, as imagens geradas dessa forma.
      Já as onde informo o caminho completo da imagem com a extensão, aparecem como utilizadas do cache.

      Esse comportamento é normal quando as imagens são geradas desse jeito ou é por não ter feito nenhuma configuração de cache no arquivo PHP que gera as imagens?
       
      Coloquei uma imagem do resultado exibido no navegador.

    • Por Wallcrawler
      Olá pessoal tudo bem? Estou tentando fazer a cópia de uma imagem que está disponível na web e salvar em uma pasta no meu projeto. Essa imagem está sob protocolo SSL mas navegador consegue acessá-la normalmente. Mas o meu script php é bloqueado, e não entendo o porquê.
       
      Segue o código que estou usando:
      <?php //error_reporting(E_ALL ^ E_DEPRECATED); //ini_set('display_errors', 1); //die('Script travado!'); $start = microtime(true); set_time_limit(0); function save_image($inPath,$outPath) { //Download images from remote server $in = fopen($inPath, 'rb'); $out = fopen($outPath, 'wb'); while ($chunk = fread($in,8192)) { fwrite($out, $chunk, 8192); } fclose($in); fclose($out); } include_once ($_SERVER['DOCUMENT_ROOT'] . '/grpi/include/classes/Rpi.class.php'); include_once ($_SERVER['DOCUMENT_ROOT'] . '/grpi/include/functions.class.php'); $func = new FuncoesAuxiliares(); $rpi = new Rpi(); if(!isset($_GET['num_processo'])) { $rows = $rpi->Consulta('select num_processo, classe, especificacao from processos order by num_processo ASC limit 1'); } else { $rows = $rpi->Consulta("select num_processo, classe, especificacao from processos where num_processo > '" . $_GET['num_processo'] . "' order by num_processo ASC limit 1"); } $registros = 0; $arrayInsert = array(); $qtd_caracteres_total = 14; foreach ($rows as $rs) { //$rs['num_processo'] $zeros = ''; $qtd_char_processo = strlen($rs['num_processo']); //Fill zeros for($i=0; $i < ($qtd_caracteres_total - $qtd_char_processo); $i++) { $zeros .= '0'; } echo('BR5' . $zeros . $rs['num_processo'] . '<br>'); $url = 'http://www.tmdn.org/tmview/trademark/image/BR5' . $zeros . $rs['num_processo']; //Aqui tento acessar a imagem e salvar na pasta correspondente save_image($url, __DIR__ .'/logo/' . $rs['num_processo'] . '.jpg'); //copy('https://www.tmdn.org/tmview/trademark/image/BR5' . $zeros . $rs['num_processo'], __DIR__ .'/logo/' . $rs['num_processo'] . '.jpg'); $processo = $rs['num_processo']; $registros++; } $registros = number_format($registros, 0, ',', '.'); // Display Script End time $time_end = microtime(true); //dividing with 60 will give the execution time in minutes other wise seconds $execution_time = ($time_end - $start)/60; //execution time of the script echo '<b>Total Execution Time:</b> '. $execution_time .' Mins <hr><br><br>Registros: ' . $registros . '<br><br>'; echo("<a href='down_logo.php?num_processo=" . $processo ."' target='_self'>Próxima página</a><br><br>"); ?> O erro retornado é o seguinte:
       
      Warning: fopen(): SSL: Connection reset by peer in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 10

      Warning: fopen(http://www.tmdn.org/tmview/trademark/image/BR500000825642590): failed to open stream: HTTP request failed! in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 10

      Warning: fread() expects parameter 1 to be resource, boolean given in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 12

      Warning: fclose() expects parameter 1 to be resource, boolean given in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 16
       
      Só que se você tentar acessar o endereço no browser, diretamente, a imagem aparece:
       
      https://www.tmdn.org/tmview/trademark/image/BR500000825642590 
       
      Onde posso estar errando? Obrigado pela atenção de todos.
    • Por Artur Mendonça
      Olá amigos.
      espero que estejam todos bem.
       
      Estou tentando criar uma galeria de imagens e colocar nestas um botão para votação (Gosto como no Facebook).

      Já consegui criar a galeria e colocar o Like nas imagens, mas acontece que quando  as imagens passam para a linha de baixo o botão Like não acompanha a imagem.
       
      Junto uma imagem para exemplificar como está e como deveria ser.
       
      O CSS está assim
      h1 { text-align: center; color: forestgreen; margin: 30px 0 50px; } .container h2 { text-align: center; color: rgb(8, 8, 8); margin: 30px 0 50px; } .gallery { margin: 10px 50px; padding-right: 0px; padding-left: 0px; } .gallery img { width: 230px; padding: 0px; opacity: 0.5; filter: grayscale(10%); transition: 1s; margin-top: 10px; margin-left: 10px; margin-bottom: 10px; margin-right: 0px; border: 2px solid #ccc; border-radius: 10%; } .ilike { display: grid; border-radius: 10%; box-sizing: border-box; text-align: left; padding: 15px; font-size: 20px; vertical-align: top; position: absolute; z-index: 1000; margin-top: 10px; margin-left: 10px; overflow: hidden; color: white; } O código da página da galeria de fotos está assim:
      <div class="gallery"> <?php $sql = "SELECT * FROM tbl_gallery where aid=$aid"; $num_rows = mysqli_num_rows(mysqli_query($conectar, $sql)); $result = mysqli_query($conectar, $sql); while ($row = mysqli_fetch_array($result)) { $gimage = $row['gimages']; $fotoid = $row['gid']; $likes = $row['likes']; ?> <a href="páginapararegistarovoto" ?> "><i class="far fa-thumbs-up ilike" alt="Vote"> <?php echo $likes; ?> </i></a> <i class="inum" > <?php echo "Foto " . $fotoid; ?> </i> <?php echo "<a href='../fotos/$gimage' data-lightbox='mygallery' data-title='Foto n.º: $fotoid'><img src='../thumbnails/$gimage' class='pic'></a>"; } ?> </div>  
       
       

    • Por Alberto Nascimento
      Como consigo salvar o "novo nome" da imagem que foi enviada para o servidor por meio de UPLOAD no mesmo registro em que estão sendo salvos os dados do formulário no banco de dados através do PHP.
      Consigo salvar os campos do formulário, mas o nome que é gerado ao enviar a imagem, não estou conseguindo.
       
      <?php include 'conecta_mysql.inc'; if(isset($_FILES['arquivo']['name']) && $_FILES["arquivo"]["error"] == 0) { echo "<center>Você enviou o arquivo: <strong>" . $_FILES['arquivo']['name'] . "</strong><br /></center>"; echo "<center>Seu tamanho é: <strong>" . $_FILES['arquivo']['size'] . "</strong> Bytes<br /><br /></center>"; $arquivo_tmp = $_FILES['arquivo']['tmp_name']; $nome = $_FILES['arquivo']['name']; $extensao = strrchr($nome, '.'); $extensao = strtolower($extensao); if(strstr('.jpg;.jpeg;.gif;.png', $extensao)) { $novoNome = md5(microtime()) . '.' . $extensao; $destino = 'imagens/' . $novoNome; if( @move_uploaded_file( $arquivo_tmp, $destino )) { echo "<br>"; echo "<img src=\"" . $destino . "\" />"; echo "<br>"; } else echo "Erro ao salvar o arquivo. Aparentemente você não tem permissão de escrita.<br />"; } else echo "Você poderá enviar apenas arquivos \"*.jpg;*.jpeg;*.gif;*.png\"<br />"; } else { echo "<center><h1>Você não enviou nenhum arquivo!</h1></center>"; echo "<center><br><h3><a href='javascript:window.history.go(-1)'>Clique aqui para volta.</a></h3></center>"; } $codphoto = $_POST['codphoto']; $nome = $_POST['nome']; $datafotografia = $_POST['datafotografia']; $photography = $_POST['novoNome']; $sql = "INSERT INTO photograph VALUES"; $sql .= "( '$codphoto', '$nome', '$datafotografia', '$photography' )"; if ($conexao->query($sql) === TRUE) { echo "<center> <h2> Obrigado !! Envio realizado com sucesso !! </h2></center>"; echo "<center><br><h3><a href='LINK_SITE'>ENVIAR OUTRA FOTOGRAFIA</a></h3></center>"; } else { echo "Erro: " . $sql . "<br>" . $conexao->error; } $conexao->close();  
    • Por Kaio Kdesigner
      Oi Pessoal!
       
      Estou editando um tema, e ai as imagens dos thumbsnails estão ficando distorcidas.
       
      Cada categoria tem um tamanho diferente de imagem, mas ai elas ficam destorcidas dentro do tamanho (meio confuso né?)
       
      ta ficando assim: https://screenshot.net/gxvqc9y
       
      Como que faço para colocar a imagem dentro do tamanho, ex: 150x150, sem q ela fique distorcida??
×

Informação importante

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