how to Calculate whether an image is landscape or portrait

Question

I am creating an image gallery with jquery. Is there any possibilities to Calculate whether an image is landscape or portrait using jquery?

Thanks for your support.

No prob. I'm not really good at jQuery so I provide you the pseudocode. — Mark, Jun 03 '13 at 07:00
The above is true if EXIF orientation (rotation) flags are set in the image. Say if an image is landscape, and the EXIF flag indicates a 90 degree rotation , clockwise, then the image is actually portrait — Nimesh Chanchani, Jul 21 '15 at 10:13

score 32 · Accepted Answer · answered Jun 03 '13 at 07:09

You can simply compare width and height of the image.

var someImg = $("#someId");
if (someImg.width() > someImg.height()){
    //it's a landscape
} else if (someImg.width() < someImg.height()){
    //it's a portrait
} else {
    //image width and height are equal, therefore it is square.
}

score 6 · Answer 2 · answered Jun 14 '17 at 10:58

This worked for me, using the natural height/width to get the original properties.

       function imageOrientation(src) {

            var orientation,
            img = new Image();
            img.src = src;

            if (img.naturalWidth > img.naturalHeight) {
                orientation = 'landscape';
            } else if (img.naturalWidth < img.naturalHeight) {
                orientation = 'portrait';
            } else {
                orientation = 'even';
            }

            return orientation;

        }

score 3 · Answer 3 · answered Mar 11 '14 at 07:15

3

Below javascript function will return the best suited Orientation

function get_orientation(src){

img = new Image();
img.src = src;
var width = img.width;
var height = img.height;
height = height + height // Double the height to get best
//height = height + (height / 2) // Increase height by 50%

if(width > height) { 
return "landscape"; 
} else {
return "portrait";
}

}

answered Mar 11 '14 at 07:15

Navneet Singh

1,218
11
17

This assumes that the image has been already loaded in the UI. Should we not wait for the image load event to trigger before actually calculating the ratio? – Sunny R Gupta Apr 26 '16 at 13:45
2

Why "height = height + height // Double the height to get best" ? – RichardB Nov 24 '16 at 20:58

score 0 · Answer 4 · answered Mar 03 '21 at 20:07

If you add the media dynamically or if you use dataUrl, you can't access the size before the element is placed in DOM.

image

resolveImage(fileEntry) // implementation detail
  .then(src => {
    const img = document.importNode(itmp, true) // use a template or `createElement()`
    img.src = src // 'data:image/svg+xml;base64,PHN2Z...'
    img.onload = ({target: el}) => (el.height > el.width) ? el.classList.add('portrait') : el.classList.add('landscape')
    grid.appendChild(img)
  })

video

resolveVideo(fileEntry)
  .then(({src, type}) => {
    const vid = document.importNode(vtmp, true)
    vid.type = type
    vid.src = src
    vid.onloadeddata = ({target: el}) => (el.videoHeight > el.videoWidth) ? el.classList.add('portrait') : el.classList.add('landscape')
    grid.appendChild(vid)
  })

how to Calculate whether an image is landscape or portrait

4 Answers4

Linked