Grab the width of an image in VUE/JS

Question

this code below when selecting an image generates a preview, i can for example grab the image type, but I can’t get the width, there is some way to get the width and height of the file?

  <input type="file" id="file" ref="myFiles" class="custom-file-input" name="logo_login" 
                                  @change="previewFiles_logo_login">

previewFiles_logo_login(e) {

                    const file = e.target.files[0];

                    alert(file.clientWidth);

                    if(!this.arquivos_permitidos.includes(file.type)){

                      this.msg_img_logo = true;


                      return;
                    }


                    this.logo_login = URL.createObjectURL(file);

                  },

Answer 1

You can pick up the width and height of the images with the methods Javascript: naturalWidth() and naturalHeight returning the original image values.

previewFiles_logo_login(e) {

   const file = e.target.files[0];

   const larg = file.naturalWidth;               // pega a largura do arquivo em file
   const altu = file.naturalHeight;              // pega a altura do arquivo em file

   alert(`Largura ${larg} - Altura ${altu}`);

   if(!this.arquivos_permitidos.includes(file.type)){

     this.msg_img_logo = true;

     return;
   }


   this.logo_login = URL.createObjectURL(file);

},