Rotate image on upload

When a user uploads an image on my platform from a mobile, the image roates if it isn’t taken in horizontal mode. Anyone got a fix for this? Like using EXIF or something.

When the user uploads an image, i make it a blob and create a base64 string for it. It all has to be handled on client-side, so i can’t just rotate the image on server side.

Thanks in advance

LMGTFY: https://github.com/blueimp/JavaScript-Load-Image

Thanks for the quick answer! This library can rotate the image in the correct way? I can’t seem to find any documentation on it and how to import

Looks like orientation is the key term :slight_smile:

orientation: Transform the canvas according to the specified Exif orientation, which can be an integer in the range of 1 to 8 or the boolean value true.
When set to true, it will set the orientation value based on the EXIF data of the image, which will be parsed automatically if the exif library is available.
Setting the orientation also enables the canvas option.
Setting orientation to true also enables the meta option.

Ah cool! Doesn’t this code has to be export default in order to use it?

Hi. Did you fix this problem? I guess I have the same problem.

Yes i did. I used exif-orientation-image to handle it.
Right now i’m working on a new project where i have to use it again, but with a different approach from my last code :slight_smile:

Filah, please, contact me! :frowning: I have the same probem now, when i pick a file through input type file, the pic gets a wrong orientation, rotation! So i have to fix it before sending it to the api! I wonder how you did it in vue js. If possible, text me on whatsapp. or fb


+48 518 673 935

Hey @Soldier666! Hope this helps :slight_smile:

<input type="file" multiple :name="uploadFieldName" :disabled="currentStatus === 'saving'" @change="filesChange($event, $event.target.files);">
....
export default {
        const getOrientedImage = require('exif-orientation-image')
        methods: {
           filesChange ($event, file) {
                if (!file.length) {
                    return
                }
                let obj = {
                   data: new FormData(),
                   dataType: file.type,
                   file: file
                }
                obj.data.append('content', file, file.name)
                this.save(obj)
            },
            save (obj) {
                let response = URL.createObjectURL(obj.file)
                let blob = null
                return new Promise((resolve, reject) => {
                   getOrientedImage(obj.file, function (err, canvas) {
                        if (!err) {
                            canvas.toBlob(function (blob) {
                                resolve(blob)
                            }, obj.file.type, 1)
                         }
                     })
                  }).then((orientedImageBlob) => {
                      blob = orientedImageBlob
                      response = URL.createObjectURL(blob)
                      // here is the correct rotated image
                  })
            }
       }
    }
3 Likes

This doesn’t work with portrait photos captured on devices like iPhone 7+. Has anyone got an updated solution for this?

This doesn’t work with portrait photos captured on devices like iPhone 7+. Has anyone got an updated solution for this?