1

Explicação

Olá pessoal, eu estou fazendo o upload de uma imagem, com JavaScript, utilizando o seguinte código:

$('#image-background').on("change", function(e) {
    var arq = URL.createObjectURL(e.target.files[0]);

    $("#mp-image-bg").attr("src", arq).css("display", "block");
});

Estou querendo retornar as dimensões da imagem upada, para poder manipulá-la. Dando um console.log() na variável arq, consigo somente visualizar a URL criada para aquela imagem, e dando outro console.log() no e.target.files[0] eu consigo algumas propriedades, como mostrado abaixo:

inserir a descrição da imagem aqui

Mas a partir de nenhuma dessas propriedades consigo extrair as dimensões, largura e altura, da imagem.

Tentativa - Possível solução

Procurando, encontrei este artigo do stackoverflow que mostra uma solução simples, porém, o cara dá um alert() na largura e altura, tentei atribuir os valores à variáveis para usar no restante do meu script e não obtive um resultado satisfatório.

var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
    var file, img, width, height;

    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
            width = this.width;
            height = this.height;
        };
        img.src = _URL.createObjectURL(file);
    }

    console.log(width);
});

Desta forma não está funcionando, gostaria de ideias de como resolver, no artigo que postei como link, há um fiddle que demonstra o funcionamento com alert();, mas quero atribuir os valores a algumas variáveis para poder manipulá-las depois.

Obrigado!

Obs:

O console.log() foi posto fora do evento propositalmente, pois quero utilizar as variáveis fora deste.

1 Resposta 1

1

Se lembre que o valor inicial de width é null e ele só será atribuído no evento onload da imagem. Perceba que o console.log(width); está por fora deste evento. O ideal seria está dentro. Corrigindo:

var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
    var file, img, width, height;

    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
            width = this.width;
            height = this.height;
            depois();
        };
        img.src = _URL.createObjectURL(file);
    }

    function depois(){
        console.log(width);
    }
});
6
  • Então, isso foi proposital, porque dentro eu sei que funciona, mas quero utilizar as variáveis fora do evento onload, é possível? 2/05/2015 às 16:56
  • Sim vou editar.... 2/05/2015 às 16:56
  • 1
    Como eu já editei, usei uma function local. 2/05/2015 às 16:58
  • Ok, vou testar aqui, e comento o resultado :) 2/05/2015 às 16:59
  • Funcionou! Obrigado! 2/05/2015 às 17:11

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 .