Повернутые изображения в Firebase Storage React Upload - PullRequest
Новая
       7

Повернутые изображения в Firebase Storage React Upload

0 голосов
/ 27 сентября 2019

У меня возникла проблема, когда при загрузке изображения в хранилище Firebase оно иногда поворачивалось.Я читал, что это в основном проблема iOS с метаданными EXIF.

Да, я нашел его в Google и нашел множество ответов, но большинство из них, похоже, используют метаданные EXIF ​​для ориентации изображения.Тем не менее, я считаю, что моя проблема в том, что мои данные EXIF ​​не отправляются на мой сервер Firebase, поэтому он думает, что мое изображение вращается.Я пытался использовать некоторые из библиотек javascript для отображения изображений с использованием данных EXIF, но все же не повезло.

Также люди предлагают просто повернуть изображение до или после отправки / получения, однако я не знаюесли мои пользователи загружают изображение, которое имеет эту проблему.

Вот мой запрос на загрузку 

/**
 * Upload image for profile
 */
exports.uploadImage = (req, res) => {
    const BusBoy = require('busboy');
    const path = require('path');
    const os = require('os');
    const fs = require('fs');

    const busboy = new BusBoy({ headers: req.headers });

    let imageFileName;
    let imageToBeUploaded = {};

    busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
        if(mimetype !== 'image/jpeg' && mimetype !== 'image/png'){
            return res.status(400).json({error: 'Wrong file type submitted'});
        }
        const imageExtension = filename.split('.')[filename.split('.').length - 1];
        imageFileName = `${Math.round(Math.random() * 1000000)}.${imageExtension}`;
        const filepath = path.join(os.tmpdir(), imageFileName);
        imageToBeUploaded = { filepath, mimetype };
        file.pipe(fs.createWriteStream(filepath));
    });
    busboy.on('finish', () => {
        admin.storage().bucket().upload(imageToBeUploaded.filepath, {
            resumable: false,
            metadata: {
                metadata: {
                    contentType: imageToBeUploaded.mimetype
                }
            }
        })
            .then(() => {
                const imageUrl = `https://firebasestorage.googleapis.com/myurl`;
                return db.doc(`/users/${req.user.handle}`).update({ imageUrl: imageUrl });
            })
            .then(() => {
                return res.json({ message: 'Image uploaded successfully' });
            })
            .catch(err => {
                console.error(err);
                return res.status(500).json({ error: err.code });
            });
    });
    busboy.end(req.rawBody);
}

А вот мой интерфейс React, захватывающий файл изображения 

handleImageChange = event => {
    const image = event.target.files[0];
    console.log(image);
    //Send to server
    const formData = new FormData();
    formData.append("image", image, image.name);
    this.props.uploadImage(formData);
  };

Затем я использую axios, чтобы сделать запрос 

xport const uploadImage = formData => dispatch => {
  dispatch({ type: LOADING_USER });
  Axios.post("/user/image", formData)
    .then(() => {
      dispatch(getUserData());
    })
    .catch(err => {
      console.log(err);
    });
};

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

...