Подтвердить что ты не робот

Неверная ориентация изображения при загрузке - Amazon S3

Я разрешаю пользователям загружать несколько изображений непосредственно на Amazon-S3 с помощью Multer-S3, а затем отображать эти изображения на передней панели через цикл. Все работает отлично.

Однако, когда изображения загружаются с помощью мобильного телефона (изображение, сделанное на iPhone или Android), ориентация правильная на мобильном телефоне, но не имеет правильной ориентации на рабочих столах. Основная проблема.

Это связано с данными EXIF, которые я считаю.

Похоже, что ImageMagick или Kraken JS https://kraken.io/docs/storage-s3 могут быть способом его решения, но для жизни я не могу понять, как либо с тем, как я загружаю и показываю изображения, показанные ниже.

Как мне изменить свой код ниже, чтобы автоматически ориентировать изображения? Примечание. Он должен работать для нескольких изображений.

Спасибо за любую помощь!

Вот как я могу позволить пользователям загружать сразу несколько изображений прямо на Amazon-S3:

aws.config.update({
    secretAccessKey: 'AccessKey',
    accessKeyId: 'KeyID',
    region: 'us-east-2'
});

var s3 = new aws.S3();

    var storage =  multerS3({
        limits : { files: 25 },
        s3: s3,
        bucket: 'files',
        key: function (req, file, cb) {
            var fileExtension = file.originalname.split(".")[1];
            var path = "uploads/" + req.user._id + Date.now() + "." + fileExtension;
            cb(null, path); 
        },
    })


var upload = multer({storage: storage}).any("images", 25);

router.post("/", middleware.isLoggedIn, function(req, res, next){

        upload(req,res,function(err) {
        if(err) {
        console.log(err);
        res.redirect('/')
        }




Listings.findById(req.params.id, function(err, foundListings){

    var allimages = []

            if(typeof req.files !== "undefined") {
            for(var i = 0; i < req.files.length; i++) {
                allimages.push(req.files[i].key);
            }
            }
 var currentimages = allimages;

 var newListings = {currentimages:currentimages}
 //Removed the other Model aspects
    Listings.create(newListings, function(err, newlyCreated){
        if(err){
            console.log(err);
        } else {

 res.redirect("/listings");
    }
    });
    });

Как я показываю изображения на лицевой стороне. Listing.currentimages - это массив, содержащий все ссылки на изображения.

app.locals.awspath = "https://s3.us-east-2.amazonaws.com/myfiles/";

// awspath - путь к пути к пути Amazon-S3

<div id='allimages'>
<% for(var i = 0; i < listings.currentimages.length; i++ ) { %>
<div class='smallerImages'>

<%  var url2 = awspath + listings.currentimages[i] %>
<img class="small" src="<%= url2 %>">

</div>
<% } %>
</div>
4b9b3361

Ответ 1

Проблема в том, что iOS устанавливает метаданные EXIF ​​изображения, которые вызывают это поведение. Вы можете использовать библиотеку, которая может читать метаданные EXIF ​​и поворачивать изображение для вас.

jpeg-autorotate (https://github.com/johansatge/jpeg-autorotate) - очень простая библиотека и имеет очень хорошую документацию (вы должны проверьте его).

Пример

var jo = require('jpeg-autorotate');
var fs = require('fs');

// var options = {quality: 85};
var options = {};
var path = '/tmp/Portrait_8.jpg'; // You can use a Buffer, too
jo.rotate(path, options, function(error, buffer, orientation) {
    if (error) {
        console.log('An error occurred when rotating the file: ' + error.message);
        return;
    }
    console.log('Orientation was: ' + orientation);

    // upload the buffer to s3, save to disk or more ...
    fs.writeFile("/tmp/output.jpg", buffer, function(err) {
        if(err) {
            return console.log(err);
        }

        console.log("The file was saved!");
    });
});

Вы можете найти некоторые образцы изображений с различными метаданными вращения EXIF ​​из здесь

Преобразован как Лямбда-функция AWS

// Name this file index.js and zip it + the node_modules then upload to AWS Lambda

console.log('Loading function');
var aws = require('aws-sdk');
var s3 = new aws.S3({apiVersion: '2006-03-01'});
var jo = require('jpeg-autorotate');

// Rotate an image given a buffer
var autorotateImage = function(data, callback) {
  jo.rotate(data, {}, function(error, buffer, orientation) {
      if (error) {
          console.log('An error occurred when rotating the file: ' + error.message);
          callback(error, null);
      } else {
        console.log('Orientation was: ' + orientation);
        callback(null, buffer);
      }
  });
};

// AWS Lambda runs this on every new file upload to s3
exports.handler = function(event, context, callback) {
    console.log('Received event:', JSON.stringify(event, null, 2));
    // Get the object from the event and show its content type
    var bucket = event.Records[0].s3.bucket.name;
    var key = event.Records[0].s3.object.key;
    s3.getObject({Bucket: bucket, Key: key}, function(err, data) {
        if (err) {
            console.log("Error getting object " + key + " from bucket " + bucket +
                ". Make sure they exist and your bucket is in the same region as this function.");
            callback("Error getting file: " + err, null);
        } else {
            // log the content type, should be an image
            console.log('CONTENT TYPE:', data.ContentType);
            // rotate the image
            autorotateImage(data.Body, function(error, image) {
              if (error) {
                callback("Error rotating image: " + error, null);
              }

              const params = {
                Bucket: bucket,
                  Key: 'rotated/' + key,
                  Body: image
              };
              // Upload new image, careful not to upload it in a path that will trigger the function again!
              s3.putObject(params, function (err, data) {
                if (error) {
                    callback("Error uploading rotated image: " + error, null);
                } else {
                  console.log("Successfully uploaded image on S3", data);
                  // call AWS Lambda callback, function was successful!!!
                  callback(null, data);
                }
              });
            });
        }
    });
};

Примечания. Эта функция загружает повернутые изображения в одно и то же ведро, но вы можете легко их изменить. Если вы только начинаете с AWS Lambda, я предлагаю вам узнать больше об этом (https://www.youtube.com/watch?v=eOBq__h4OJ4, https://www.youtube.com/watch?v=PEatXsXIkLc)

Удостоверьтесь, что у вас есть права доступа (чтение и запись), правильный триггер функции, правильный "обработчик" при создании функции! Обязательно проверяйте журналы функций в CloudWatch, упрощая отладку. Если он начнет отсчет времени, увеличьте время ожидания и увеличьте его память.