Validar dimensões de imagem e vídeo com Javascript
As vezes só queremos capturar a altura e largura de uma mídia sem precisar expor ela de fato no documento HTML.
Você já parou para pensar o quanto é fascinante o que se pode fazer somente com o javascript? Pois bem, o artigo de hoje tem a proposta de trazer de forma simples e direta como capturar a largura e a altura de arquivos do tipo imagem e vídeo sem necessariamente esses arquivos estarem expostos no document de seu site. Espero que esse artigo possa ajudar você a criar mais uma camada de validação de seus arquivos de mídia além das validações do backend.
Sem mais delongas, vamos ao que interessa…
Vamos criar uma classe estática chamada MediaDimensions que vai conter nossas duas funções.
export class MediaDimensions {
//CODE...
}Nesse exemplo, considerando que essa classe será um helper dentro de seu projeto, adicionamos um export para usá-lo em diferentes lugares.
Vamos criar uma função estática chamada getImageDimensionsFromFile e outra função estática chamada getVideoDimensionsFromFile. O nome é auto descritivo, ou seja, de um arquivo do tipo file vamos extrair as dimensões da imagem e, no segundo método de outro arquivo file, vamos extrair as dimensões, só que agora do vídeo, ficando assim:
Legal, né?! Se você entendeu a ideia, copie o código para seu projeto e use com sabedoria. Mas, se você não entendeu, não se preocupe, continue lendo que vai começar a fazer sentido.
Para entender as bruxarias, adicionei comentários no mesmo código demostrado acima.
Finalizando:
Agora, precisamos verificar os dados retornados. Acompanhe aqui no exemplo abaixo, lembrando que essa parte vai variar muito da sua real necessidade.
Exemplo com vídeo
const videoDimensions = MediaDimensions.getVideoDimensionsFromFile(file)if(videoDimensions.width < 800 && videoDimensions.height < 600) {
//Lógica que fizer sentido para você
}
Exemplo com imagem
const imageDimension = MediaDimensions.getImageDimensionsFromFile(file)if(imageDimension.width > 75 && imageDimension.height > 75) {
//Lógica que fizer sentido para você
}
Com isso concluímos nosso mini tutorial de verificação de arquivos de imagem e vídeo via javascript. Espero que tenham gostado e, mais ainda, que possa ter ajudado você leitor de alguma forma.
