4

Eu estou criando um sistema para organizar as imagens de um site, ou seja, vou armazenar informações como nome, extensão, tamanho, altura, largura, ... e estou com dificuldades para pegar os dados da altura e da largura

Os códigos atualmente são:

jQuery:

$(document).ready(function(){
        $('#file').on('change',function(e){

            var input = e.target;
            var reader = new FileReader();
            reader.onload = function(){
          var dataURL = reader.result;
          $('#img').prop('src',dataURL);
          console.log($('#img'));
        };
        reader.readAsDataURL(input.files[0]);

        var arquivo = input.files[0].name;
            var split = arquivo.split('.');
        var extensao = split[split.length-1];
        var nome = arquivo.replace('.'+extensao,'');
        var tamanho = (input.files[0].size/1024).toFixed(2);
        var altura = 'ainda não descobri';
        var largura = 'ainda não descobri';

        $('#arquivo').html('Arquivo: '+arquivo);
        $('#nome').html('Nome: '+nome);
        $('#extensao').html('Extensão: '+extensao);
        $('#tamanho').html('Tamanho: '+tamanho+' kB');
        $('#altura').html('Altura: '+altura);
        $('#largura').html('Largura: '+largura);
        });
    });

HTML:

<input id="file" type='file' accept='image/*'><br>
<br>
<p id="arquivo"></p>
<p id="nome"></p>
<p id="extensao"></p>
<p id="tamanho"></p>
<p id="altura"></p>
<p id="largura"></p>
<br>
<img id='img'>

Descobri que ao escrever console.log($('#img')); no onload faz com que apareça no console as informações da imagem, mas ao digitar $('#img').width(); ou $('#img').height(); o resultado passa a ser 0. Alguém pode me ajudar?

5
  • 1
    tente o seguinte var width = $('#img').naturalWidth; var height = $('#img').naturalHeight; Commented 8/09/2017 às 14:55
  • Fica 'undefined' usando o natural... Commented 8/09/2017 às 14:57
  • Acredito que funcione somente após o carregamento da imagem Commented 8/09/2017 às 15:04
  • Consegui com o [0]. Ficou $('#img')[0].naturalWidth; e $('#img')[0].naturalHeight. Commented 8/09/2017 às 15:06
  • Mas só pega da segunda em diante... Commented 8/09/2017 às 15:18

1 Resposta 1

3

Após o carregamento da imagem você consegue obter esses valores através de suas propriedades, exemplo:

console.log($(img).prop('height'));
console.log($(img).prop('width'));

$('#teste').load(function(){
  	$("#height").html($(this).prop('height'));
    $("#width").html($(this).prop('width'));
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="imagem">
  <img id="teste" src="http://www.google.hr/images/srpr/logo3w.png" />
</div>
<div id="DadosDaImagem">
  <span id="height"></span>
  <span id="width"></span>
</div>

1
  • Me ajudou a resolver o problema: Ficou assim: $('#img').on('load',function(){ console.log($(this).prop('height')); console.log($(this).prop('width')); }); Commented 8/09/2017 às 15:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .