1

When uploading images from a mobile device such as an iPhone, images often appear sideways, unless accessing the image directly in Chrome.

From what I've read on here, this has to do with an image exif orientation data that a browser like Chrome would ignore.

What are the solutions to fixing something like this?

Have some additional code to have multer rotate it according to the orientation data and re-save it?

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)  {
    .....
});
totalnoob
  • 2,521
  • 8
  • 35
  • 69

1 Answers1

0

I think it is the other way around - the image carries the information about its orientation in the EXIF data (stored by the iPhones sensors when taking the shot), and Chrome reads it and adjusts them accordingly.

You need to find and interpret that data, and your algorithm will be able to rotate them correctly too. See for example iOS Image Orientation has Strange Behavior for some more info.

danronmoon
  • 3,814
  • 5
  • 34
  • 56
Aganju
  • 6,295
  • 1
  • 12
  • 23