在Jimp中修正图像方向

6

我正在使用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

请帮忙解决。

2个回答

0

只需将jimp版本更改为

"jimp": "0.8.5",

1
能够简要解释一下这个程序是如何工作的/如何解决问题,以及它与现有答案的不同之处,会很好。 - starball

0

简而言之:jimp可以正确读取通过exif方向属性旋转的图像,并重新排列像素,就好像exif/orientation属性不存在一样,但是它也会存储旧的exif属性,而不是将其重置为1,以便在每个设备上正确显示。

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

    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)
        });

如果您需要在后端执行此操作,则最好使用建议的缓冲区herejpeg-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方向处理是一个贫民区


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接