0

Em minha aplicação eu faço um preview da imagem, essa parte está ok, porém o cliente quer que seja validada as dimensões antes de ser realizada o upload. Em um primeiro momento também estaria ok, senão fosse que em alguns momentos o FileReader não conseguir pegar as dimensões da imagem, retornando o height e width com valor 0. Alguém já passou por isso?

Estou usando o Angular 7.2

readerFile(files, input) {
  const img = new Image();
  img.src = window.URL.createObjectURL( files[0] );

  const reader = new FileReader();

  this.setImage(files[0]);
  this.imagePath = files;

  this.onloadReaderFile(reader, img, input, files);
}

onloadReaderFile(reader: FileReader, img, input, files) {
  reader.readAsDataURL(files[0]);

  reader.onload = (event) => {
    const width = img.naturalWidth;
    const height = img.naturalHeight;

    window.URL.revokeObjectURL( img.src );

    if (!this.isReaderFileWithSuccess(height, width, input)) {
      return;
    }
    if (!this.isCorrectSizeImage(height, width, input)) {
      return;
    }

    this.isNewImage = true;
    this.imgURL = reader.result;
  };
}

isReaderFileWithSuccess(height: number, width: number, input: HTMLInputElement): boolean {
  if (height === 0 && width === 0 ) {
    this.message = 'Erro ao importar o arquivo, tente novamente!';
    input.value = '';
    this.removeImage();
    return false;
  }
  return true;
}

Cheguei a colocar uma mensagem de erro avisando do problema, mas ele não quer que dê esse problema.

Obs: Muitas vezes esse erro não ocorre na primeira tentativa, em meu computador preciso ficar mudando as imagens depois de várias tentativas ocorre esse problema.

1
  • Pelo que observei o problema está na hora de criar a Imagem e não no FileReader, mas ainda não sei o que pode ser Commented 22/05/2019 às 14:23

1 Resposta 1

0

Consegui resolver esse problema adicionando onload na imagem também, nem sabia que existia esse método no objeto do tipo Image, no fim apenas o método readerFile foi modificado e acabou ficando assim:

readerFile(files, input) {
  const img = new Image();
  img.src = window.URL.createObjectURL(files[0]);

  const reader = new FileReader();

  this.setImage(files[0]);
  this.imagePath = files;

  img.onload = () => { // Adicionado isso
    this.onloadReaderFile(reader, img, input, files);
  };
}

O que estava causando essa anomalia é que eu não estava esperando o Objeto Image terminar de abrir e usar o arquivo de fato e já estava usando o FileReader. Como eu fazia a validação do tamanho da imagem dentro do onload do FileReader, algumas vezes ocorria dele terminar antes do Image e dar o problema de validação.

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 .