Only accept photos smaller than 1920x1080

Question

How do I only accept photos (from the file explorer) smaller that 1920x1080. Otherwise, my entire webpage get flooded with one image. Here is my code for importing the photos:

Html:

<input type="file" id="file" accept="image/png, img/jpeg">

Javascript:

    function Read(){
    var file = document.getElementById("file").files[0];
    var reader  = new FileReader();
    reader.onload = function(e)  {
        var image = document.createElement("img");
        // the result image data
        image.src = e.target.result;
        document.body.appendChild(image);
  }
    reader.readAsDataURL(file);
  }

Does this help https://stackoverflow.com/questions/32912803/client-side-image-resolution-size-validation — mk23, Jul 21 '21 at 01:54
e.target.result should be returning the height and width of image also. So on that basis, add the image to dom — Irfan wani, Jul 21 '21 at 01:54
Does this answer your question? [Check image width and height before upload with Javascript](https://stackoverflow.com/questions/8903854/check-image-width-and-height-before-upload-with-javascript) — kmoser, Jul 21 '21 at 04:02
Keep in mind you **must** also check the image size on the server. Any validation in the browser can easily be circumvented. — RoToRa, Jul 21 '21 at 09:07

score 0 · Accepted Answer · answered Jul 21 '21 at 06:47

You can use Canvas to resize bigger images.

<input type="file" id="file" accept="image/png, img/jpeg" @change="selectFile">

      selectFile: function (list)
      {
        const self = this, limitWidth = 1920, limitHeight = 1080, len = list.length;
        let i, item, cnt = len;
        events.$emit('show_spinner');
        for(i=0;i<len;i++)
          if(list[i].size)
          {
            item = list[i];
            const reader = new FileReader(), img = new Image(), canvas = document.createElement('canvas');
            reader.onload = function (e)
            {
              img.v_name = this.v_name;
              img.v_size = this.v_size;
              img.src = e.target.result;
            };
            reader.onerror = function ()
            {
              events.$emit('hide_spinner');
            };
            img.onerror = function ()
            {
              events.$emit('hide_spinner');
            };
            img.onload = function ()
            {
              canvas.width = img.naturalWidth;
              canvas.height = img.naturalHeight;
              // preserve aspect ratio
              if(canvas.width > limitWidth)
              {
                canvas.width = limitWidth;
                canvas.height = limitWidth * img.naturalHeight / img.naturalWidth;
              }
              if(canvas.height > limitHeight)
              {
                canvas.height = limitHeight;
                canvas.width = limitHeight * img.naturalWidth / img.naturalHeight;
              }
              // implicit width and height in order to stretch the image to canvas
              canvas.getContext("2d").drawImage(img, 0, 0, canvas.width, canvas.height);
              self.fileArray.push(
                {
                  name: this.v_name,
                  size: this.v_size,
                  src: canvas.toDataURL('image/jpeg', 0.8),
                  id: Date.now()
                }
              );
              cnt--;
              if(cnt==0) events.$emit('hide_spinner');
            };
            reader.v_name = item.name;
            reader.v_size = item.size;
            reader.readAsDataURL(item);
          }
      },

score 0 · Answer 2 · answered Jul 21 '21 at 06:59

You don't need to check the image size. you can just use css for resizing the image so it doesn't fill up the page.

img {
    width: 100%;
    max-width: 300px;
    /** height will be automatically calculated */
}

this way images won't be wider than 300 pixels and they won't fill up your entire page.

Only accept photos smaller than 1920x1080

2 Answers2