Pegar largura e altura de imagem

[Willian Aquino]

Boa tarde pessoal,

Tenho uns banner que são montado via JavaScript, pegando informações do BackEnd como textos e imagens e depois coloco na tela.

Mas tenho problemas com imagens, porque estou redimensionando via css, mas agora preciso pegar o tamanho dessas imagens e aplicar o css correto, mas não estou conseguindo pegar o tamanho das imagens depois de dar um innerHTML. Já tentei várias coisas e não consigo. alguém poderia me ajudar ?

document.getElementById("anuncios").innerHTML = temp[0]; // esse cara ai eu coloca na tela os formatos é uma String com todos os formatos.

var oImgs = document.getElementById('container').getElementsByTagName('img'); // esse cara eu pega todos os imgs da tela

Agora vem o problema, já tentei várias coisas

console.log(oImgs[0].offsetWidth);  

console.log(oImgs[0].width);  

console.log(oImgs[0].clientWidth);  

mas não pega, já tentei criar um objeto colocar na tela e pegar o valor mas também não funciona.

var oImg=document.createElement("img");

      oImg.setAttribute('src', temp[1]);

      oImg.setAttribute('id', 'myImage');

      document.body.appendChild(oImg);

      var img = document.getElementById('myImage');

      console.log(img.offsetWidth);

           

Antes que alguém pergunte, com Jquery eu consegui pegar com o .width(); mas neste projeto não posso usar jquery só js puro mesmo.

Abraços!

[Rogerio Medeiros]

Ja tentou dar onload ?

--
--
Grupo de jQuery Brasil.
 
REGRAS: https://docs.google.com/document/d/1VfvTDmeHTSj-L5ouZJjQQ4OkjTCU1Hr2XtPYBNGVHH4/edit
 
USE O JSBIN.COM / JSFIDDLE.NET PARA CÓDIGOS.
 
Email: jque...@googlegroups.com
Biba: jquery-br+...@googlegroups.com
Site: http://groups.google.com/group/jquery-br?hl=pt-BR

---
Você recebeu essa mensagem porque está inscrito no grupo quot;jQuery (Brasil)" dos Grupos do Google.
Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para jquery-br+...@googlegroups.com.
Para mais opções, acesse https://groups.google.com/d/optout.

--
att,

Rogerio

A complicação se descomplica na mesma proporção que fazemos os nós se desatarem ao tecer o conhecimento do saber.

[Leonardo Rodrigues]

pelo que entendi vc precisa criar um objeto imagem mesmo visto que vc só possui o caminho dela né ? o caminho no caso não é um elemento logo vc nao conseguira pegar esses dados ... tente isso

imgSrc = "seu caminho de imagem";

var newImg = new Image();

newImg.src = imgSrc;

curHeight = newImg.height;

curWidth = newImg.width;

console.log(curHeight);

console.log(curWidth);

Leonardo Rodrigues da Silva
WebDeveloper

<blog>http://www.leo.voudeargohost.net/</blog>
<about>http://about.me/leo07vasp</about>
<linkedin>http://www.linkedin.com/profile/view?id=104259451</ linkedin >
<facebook>http://www.facebook.com/leo07vasp</ facebook >
<twitter>http://www.twitter.com/leo07vasp</ twitter>

[Willian]

Rogerio,

Ainda não porque tenho um function function init(){}

Nela chamo outra function que faz o trabalho para mim de montar o html e no init eu append o html no browser.

Não sei se o onload resolve porque aquando página for carregada não vai ter nada lá.

O estranho é que eu consigo selecionar todos os imgs da página mas todos vem com os atributos zerados.

var oImgs = document.getElementById('container').getElementsByTagName('img');

            

            for(var i=0; i < oImgs.length; i++){

            console.log(oImgs[i]);

            }

Em 7 de abril de 2014 14:50, Rogerio Medeiros <arg...@gmail.com> escreveu:

[Willian]

Leonardo,

é exatamente isso, só tenho o caminho da imagem e crio o html na unha. Já tentei algo parecido com o que você mandou, vou ver ser tentar o que você mando.

Valeu !

[Willian]

Leonardo e Pessoal,

Coloquei a caminho da imagens e mesmo assim me aparece o 0 "zero".

Será isso acontece porque eu acabei de appendar na tela o html ? É como falei consigo pegar os imgs mas vem todos vazio, fiz um teste com jquery e consigo pegar com o .with() mas com o js puro não rola. Já não sei o que fazer.

[Leonardo Rodrigues]

me tira um duvida as imagens estão no mesmo dominio que vc esta usando o script? caso nao estejam tente add essa linha

newImg.crossOrigin = "anonymous";

[Leonardo Cruz Costa]

Não sei se entendi muito bem...

Willian, você tem um sistema que carrega dinamicamente as imagens no html depois da página ter sido carregada? Se for isso, lembre-se que você precisa atualizar o DOM para que as imagens existam e, aí sim, poder lê-las. 

~~~~~~~~~~~~~~~~~~~~~~~~~~~
Leonardo Cruz Costa - Web designer
~~~~~~~~~~~~~~~~~~~~~~~~~~~
Conceição de Macabu / RJ - Brasil

Telefones: 

  - Tim (22)9-8142-3888

  - Vivo (22)9-9964-1819

IM: 

  - Live: leik...@hotmail.com

  - GTalk: leik...@gmail.com

  - Facebook: http://www.facebook.com/CruzCostaWeb

http://www.cruzcosta.com.br

[Willian]

1º Leonardo

As imagens estão em outro dominio, o sistema me forne-se só o caminho da imagem e eu crio o html assim

adImage = '<span class="AdImage"><img id="imageAds" src='+imgUrl+' /></span>';

E vou montando o html para o banner

2º Leonardo Cruz

Não, quando a solicitação da peça por uma url, por exemplo http://meu dominio.com,br?format1.html

Vem uma chamada para o backend para o format1.html, o sistema busca as peças cadastradas para esee formato, dai eu monto via js o html e coloco na tela.

Eu acho que esse problema é por causa que não da tempo do js ler o atributos do html, vou criar um llop aqui para ver quando consigo pegar esses valores, já que o elemento img eu consigo pegar.

Se tiverem mais dúvidas é só perguntar.

[Leonardo Rodrigues]

William da uma olhada nesse artigo pode ser problema de CORS

https://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/

[Leonardo Cruz Costa]

Willian, deixa eu tentar entender um pouco mais? Sem ser chato? Rs.

Um web service manda pra você o link da imagem ou você o lê direto de um .html criado previamente no servidor? Tem como você poder aqui como fica, no DOM, o elemento <img> completo depois que você o cria com seu .js?

~~~~~~~~~~~~~~~~~~~~~~~~~~~
Leonardo Cruz Costa - Web designer
~~~~~~~~~~~~~~~~~~~~~~~~~~~
Conceição de Macabu / RJ - Brasil

Telefones: 

  - Tim (22)9-8142-3888

  - Vivo (22)9-9964-1819

IM: 

  - Live: leik...@hotmail.com

  - GTalk: leik...@gmail.com

  - Facebook: http://www.facebook.com/CruzCostaWeb

http://www.cruzcosta.com.br

[Willian]

Leonardo Cruz,

Isso um webservice me manda o caminho da imagem e eu com o js crio o banner para o format1.html, o format01 tem o js que vai renderizar o html, eu pego todas as informações como textos e imagem e monto o html.

O elemento img cria ele certinho <img src="caminho_da_imagem" id="idimagem" />

Mas não pega o width e height da imagem, já fiz um teste para pegar outro elemento e consigo certinho, só para a imagem que não.

Leonardo,

Obrigado vou ler o artigo que você mando.

Está complicado ! :(

[Leonardo Cruz Costa]

Willian, posso estar enganado, mas se no DOM a sua imagem fica sem os parâmetros de width e height, então você não tem como pegá-los com esses comandos em javascript. Para fazer isso será necessário ler na própria imagem, ou verificar se o webservice envia isso junto com o retorno da sua requisição.

~~~~~~~~~~~~~~~~~~~~~~~~~~~
Leonardo Cruz Costa - Web designer
~~~~~~~~~~~~~~~~~~~~~~~~~~~
Conceição de Macabu / RJ - Brasil

Telefones: 

  - Tim (22)9-8142-3888

  - Vivo (22)9-9964-1819

IM: 

  - Live: leik...@hotmail.com

  - GTalk: leik...@gmail.com

  - Facebook: http://www.facebook.com/CruzCostaWeb

http://www.cruzcosta.com.br

[Willian]

Leonardo,

Puts cara no serviço não vem nada, só a link da imagem mesmo, é muito bizarro isso, porque se eu tento pegar o tamanho de uma div e consigo mas da imagem não, estou lendo o artigo e tentei colocar o 

newImg.crossOrigin = "anonymous"; 

E deu o seguinte erro:

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

Agora da uma olhada. No meu for eu dei um console.log no obj e olha os atributos ai:

1. className: ""
2. clientHeight: 80
3. clientLeft: 0
4. clientTop: 0
5. clientWidth: 110
6. naturalHeight: 80
7. naturalWidth: 110

Agora quando eu coloco o tento da um console.log nestes atributos me vem o 0 "zero"

var oImgs = document.getElementById('container').getElementsByTagName('img');

            

for(var i=0; i < oImgs.length; i++){

      console.log(oImgs[i].clientWidth);

}

[Willian]

Pessoal,

Consegui !!!!! 

Precisa executar um onload como o Rogerio falou, então ficou assim:

var oImgs = document.getElementById('container').getElementsByTagName('img');

for(var i=0; i < oImgs.length; i++){

           

            var img = new Image();

img.onload = function(){

 var height = img.height;

 var width = img.width;

 

 console.log(width);

}

img.src = oImgs[i].src;

}

Até a próxima

Abraços!