IPhone XR, изображение с камеры имеет ширину и высоту, переключается в JavaScript

Question

Поэтому я, кажется, обнаружил странное поведение при определении типа изображения (пейзаж / портрет) на изображении IPhone XR (формат heic). Похоже, что в javascript переключены ширина и высота изображения. Есть ли информация об этом поведении? Или у вас, ребята, есть предложения по поводу того, что произойдет? Код, обнаруживающий нормальное поведение на любом другом изображении.

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

На самом деле ширина и высота не переключаются, вместо этого ваше портретное изображение является пейзажным изображением. Информация о том, что это ландшафтное изображение имеет портретную ориентацию, сохраняется в exif-данных файла изображения. Когда вы открываете изображение в macOS, iOS или Windows, оно проверяет exif-данные и поворачивает изображение на дисплее, так что вы никогда не заметите, что оно действительно сохраняется как альбомная.

Для считывания exif-данных в JavaScript вы можете использовать такие скрипты, как exif-js или exif-parser. Тогда вы можете вращать / вычислять вращение самостоятельно по заданному номеру ориентации:

Дополнительная информация об exif-ориентации: https://github.com/bwindels/exif-parser