Capturar tamanho da imagem escolhida.

[KaKarotto]

Esses dias apareceu uma dúvida no fórum de como verificar as dimensões da imagem antes de mandar para o servidor.

Eu achei interessante a dúvida e resolvi postar aqui um código que fiz para terem uma idéia de como fazer.

function //{  
    verifyImage    (url, fn, target)
        {    
            // É imagem?
                if( !url.match(/.*\.(jpg|png|bmp|gif)/) )
                return alert("Não é imagem")
                
            var img = document.createElement("img")
            img.src = url + "?" + Math.random()
                // Objeto usado para mostrar o texto de carregar //
                var loading = document.getElementById("loading")
                loading.innerHTML = "Recebendo dados..."
                target.innerHTML = "" // Refresh no conteúdo         
                
            // Ao ser carregada a imagem chamará a função passada como argumento e 
            // após isso removerá o texto carregando da tela.
            img.onload = function(){ fn.call(this, this); loading.innerHTML = "" }
        }
//}

Este é o código que fará a mágica. E a implementação:

<span id="loading"></span>
<input type="text" id="url" name="url" />
<button id="go">Verificar imagem</button>
<div id="preview"></div>

window.onload=function(){
    var url = document.getElementById("url")
    var but = document.getElementById("go")
    
    but.onclick = function(){
        verifyImage(url.value, function(img){
            document.getElementById("preview").innerHTML = (
                "<p>Url: <span>"+ img.src.replace(/(\?.*\d)/,"") +"</span></p>" +
                "<p>Altura: <span>"+ img.width +" <small>px</small></span></p>" +                
                "<p>Largura: <span>"+ img.height +" <small>px</small></span></p>"                
            )
            
        }, document.getElementById("preview") )
    }    
}

A verifyImage geralmente não muda, então caso queira alterar o código para alguns fins mais específicos, altere os códigos da implementação.

Qualquer dúvida ou sugestão, poste aqui.

Deixei um exemplo pronto para quem quiser testar.

Abraço

teste.htm