Question

从iPhone等移动设备上传图片时，图片通常会横向显示，除非直接在Chrome中访问图片。

根据我在这里阅读的内容，这与图像exif方向数据有关，像Chrome这样的浏览器会忽略该数据。

解决此类问题的解决方案是什么？

还有一些附加代码可以使multer根据方向数据旋转并重新保存吗？

const upload = multer({ storage: multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, avatar_path);
    },

    filename: function (req, file, cb) {
        var ext = require('path').extname(file.originalname);
        ext = ext.length>1 ? ext : "." + require('mime').extension(file.mimetype);
        require('crypto').pseudoRandomBytes(16, function (err, raw) {
            cb(null, (err ? undefined : raw.toString('hex') ) + ext);
        });
    }
})});

app.post('/upload', upload.single('avatar'), function(req,res)  {
    .....
});

Answer 1

在/ upload路由中使用Jimp之类的内容重新保存

https://github.com/oliver-moran/jimp

app.post('/upload', upload.single('avatar'), function(req,res)  {
    Jimp.read(req.file.filename)
    .then(function (img) {
        return img.exifRotate()
        .write(req.file.filename)
    }).catch(function (err) {
        console.error(err);
    })
})

或使用它与multer的StorageEngine挂钩进行预处理

https://github.com/expressjs/multer/blob/master/StorageEngine.md

Answer 2

我认为是另一回事-图像在EXIF数据（拍摄时由iPhone的传感器存储）中携带有关其方向的信息，然后Chrome读取并进行相应调整。

您需要查找并解释该数据，并且您的算法也将能够正确旋转它们。有关更多信息，请参见例如iOS Image Orientation has Strange Behavior。

由于exif数据，iPhone上载的图片显示为横向

2 个答案: