修复 Jimp 中的图像方向答案

【问题标题】：Fix image orientation in Jimp修复 Jimp 中的图像方向
【发布时间】：2021-01-19 13:47:03
【问题描述】：

我正在使用 Jimp (https://www.npmjs.com/package/jimp) 库来裁剪图像。

裁剪工作正常，但我只有图像方向的问题。

有时，用户上传旋转后的图像，结果旋转裁剪后的图像。

我浏览了https://www.npmjs.com/package/jimp 文档，但找不到与此相关的任何内容。

以下是我浏览过但没有帮助的几个链接：

https://justmarkup.com/articles/2019-10-21-image-orientation/

Accessing JPEG EXIF rotation data in JavaScript on the client side

请帮忙

【问题讨论】：

标签： node.js image-processing jimp

【解决方案1】：

所以，长话短说：jimp 正确读取通过 exif 方向属性旋转的图像并重新排列像素，就好像 exif/orientation 属性不存在一样，但随后也存储旧的 exif 属性而不是将其重置为 1应该让它在每台设备上正确显示。

我能够实现的最简单的解决方案是使用exif-auto-rotate 旋转图像像素并在将（base64 编码的）图像上传到后端之前重置前端的 exif 属性：

    import Rotator from 'exif-auto-rotate';
    
    // ...
    
    const [file] = e.target.files;
    
    const image = await Rotator.createRotatedImageAsync(file, "base64")
        .catch(err => {
            if (err === "Image is NOT have a exif code" || err === "Image is NOT JPEG") {
                // just return base64 encoded image if image is not jpeg or contains no exif orientation property
                return toBase64(file)
            }
            // reject if other error
            return Promise.reject(err)
        });

如果您需要在后端执行此操作，那么您最好按照建议的here 使用带有缓冲区的jpeg-autorotate：

const fileIn = fs.readFileSync('input.jpg')
const jo = require('jpeg-autorotate')
const {buffer} = await jo.rotate(fileIn, {quality: 30})
const image = await Jimp.read(buffer)

有关基于浏览器的 exif 方向问题的更多信息：

EXIF Orientation Handling Is a Ghetto

【讨论】：