1

因此，在 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])
4

1 回答 1

0

实际上宽度和高度没有切换，而是您的纵向图像是横向图像。该景观图像具有纵向方向的信息保存在图像文件的 exif 数据中。当您在 macOS、iOS 或 Windows 上打开图像时，它会检查 exif 数据并旋转显示的图像，因此您永远不会注意到它实际上保存为横向。

要在 JavaScript 中读取 exif-data，您可以使用exif-js或exif-parser等脚本。然后您可以通过给定的方向编号自己旋转/计算旋转：

在此处输入图像描述

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

于 2019-04-08T10:27:17.693 回答