IPhone XR , image from camera have width and height switched in javascript

Question

So I seem to found out a weird behaviour when detecting image type (landscape / portrait) on IPhone XR image (heic format). It seems that javascript have the the image width and height switched. Is there any information about this behaviour? Or do you guys have any suggestion about what happen? The code detecting normal behaviour in any other image.

reader.onload = function (e) {
                    const img = new Image()
                    img.src = e.target.result
                    img.onload = (f) => {
                        // nuxt,vue 
                        that.$nextTick(() => {
                            const width = img.width
                            const height = img.height
                            console.log(img.width, img.naturalWidth, img.height, img.naturalHeight)
                            if (height > width) {
                                that.imgType = 'portrait'
                            } else {
                                that.imgType = 'landscape'
                            }
                            console.log(that.imgType)
                        })
                    }
                    that.img = img
                }
                reader.readAsDataURL(this.$refs.fileUpload.files[0])

Answer 1

Actually the width and height are not switched, instead your portrait-image IS a landscape-image. The information that this landsccape-image has a portrait-orientation is saved within exif-data of the image-file. When you open the image on macOS, iOS or Windows it checks the exif-data and rotates the image on display so you will never notice it is actually saved as landscape.

To read out the exif-data in JavaScript you can use scripts like exif-js or exif-parser. Then you might rotate/calculate the rotation yourself by the given orientation-number:

Further informations about exif-orientation: https://github.com/bwindels/exif-parser