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数据并旋转显示的图像，因此您永远不会注意到它实际上已另存为横向图像。

要在JavaScript中读取exif数据，可以使用exif-js或exif-parser之类的脚本。然后您可以按照给定的方向编号自己旋转/计算旋转：

有关exif方向的其他信息：https://github.com/bwindels/exif-parser

iPhone XR的摄像头图像在javascript中的宽度和高度已切换

1 个答案: