代码之家  ›  专栏  ›  技术社区  ›  totalnoob

由于exif数据,从iPhone上传的图像会出现在侧面。

  •  1
  • totalnoob  · 技术社区  · 7 年前

    从iPhone等移动设备上传图像时,图像通常出现在侧面,除非直接在Chrome中访问图像。

    根据我在这里读到的,这与像Chrome这样的浏览器会忽略的图像exif方向数据有关。

    解决这种问题的方法是什么?

    是否有一些附加代码让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)  {
        .....
    });
    
    2 回复  |  直到 7 年前
        1
  •  1
  •   codechella    7 年前

    在你的/上传路径中使用类似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);
        })
    })
    

    或者用它来预处理穆特的存储引擎挂钩

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

        2
  •  0
  •   Aganju    7 年前

    我认为这是另一种方式——图像在exif数据(拍摄时由iPhone传感器存储)中携带有关其方向的信息,chrome读取并相应地调整它们。

    您需要找到并解释这些数据,您的算法也能够正确地旋转它们。例如,请参见 iOS Image Orientation has Strange Behavior 更多信息。