Swift: Images rotated from portrait to landscape when loaded from Firebase

Question

Part of my iOS app uses Firebase Storage to store and load images taken/uploaded by the user. However, every time I upload a picture to Firebase in portrait orientation, when I retrieve it back from Firebase later on it comes in landscape orientation and thus displays incorrectly.

I've read that Firebase stores metadata to determine the correct orientation of an uploaded picture but it doesn't seem to be working for me.

Any one know how to get the orientation the image was uploaded in without manually having to rotate it within the app's code?

Thanks!

edit for code:

Uploading:

        let imageMetaData = FIRStorageMetadata()
        imageMetaData.contentType = "image/png"

        var imageData = Data()
        imageData = UIImagePNGRepresentation(chosenImage)!

        let currentUserProfilePictureRef = currentUserStorageRef.child("ProfilePicture")

        currentUserProfilePictureRef.put(imageData, metadata: imageMetaData) { (metaData, error) in
            if error == nil {
                let downloadUrl = metaData?.downloadURL()?.absoluteString
                self.currentUserRef.updateChildValues(["profilePictureUrl": downloadUrl!])
                if (chosenImage.size.width.isLess(than: (chosenImage.size.height))) {
                    self.currentUserRef.updateChildValues(["profilePictureOrientation": "portrait"])
                }
                else {
                    self.currentUserRef.updateChildValues(["profilePictureOrientation": "landscape"])
                }


            } 
        }

Retrieving:

self.currentUserStorageRef.child("ProfilePicture").data(withMaxSize: 20*1024*1024, completion: {(data, error) in
                    var profilePicture = UIImage(data:data!)

                    if(profilePicture?.size.width.isLess(than: (profilePicture?.size.height)!))! {
                        if (pictureOrientation == "landscape") {
                            profilePicture = profilePicture?.rotated(by: Measurement(value: -90.0, unit: .degrees))
                        }
                    } else {
                        if (pictureOrientation == "portrait") {
                            profilePicture = profilePicture?.rotated(by: Measurement(value: 90.0, unit: .degrees))
                        }
                    }

                    self.buttonProfilePicture.setImage(profilePicture, for: .normal)
                    self.buttonProfilePicture.imageView?.contentMode = .scaleAspectFill
                })

Can you add the code you're using to store and retrieve the images? — Jordi Bruin, Feb 01 '17 at 23:43
I had something similar to this happen to me randomly when fetching images I saved in CloudKit. Are you saving them using `PNGRepresentation`? — Pierce, Feb 01 '17 at 23:59
Edited original question to add code. I'm currently manually checking if the image was uploaded in portrait orientation or landscape orientation and then rotating the image if necessary since this hasn't been working. — user3029918, Feb 02 '17 at 00:29
I asked essentially the same thing a year ago http://stackoverflow.com/q/35973296/5378116 — Pierce, Feb 02 '17 at 00:29
Changing to use `JPEGRepresentation` fixed the issue for me. I guess JPEG stores orientation data whereas PNG doesn't always — Pierce, Feb 02 '17 at 00:30
Awesome, thank you everyone! I'll give it a try and report back! — user3029918, Feb 02 '17 at 00:41
Sure! I'll post an answer in case someone else has this issue. — Pierce, Feb 02 '17 at 02:09

score 15 · Accepted Answer · answered Feb 02 '17 at 02:13

From my own personal experience (and asking virtually the same question a year ago), I've found that when you save an image using UIImagePNGRepresentation, it doesn't actually store the orientation data for that specific image. You should use UIImageJPEGRepresentation when you're having orientation issues. JPEG uses the exif format that specifies the orientation for an image, whereas PNG apparently does not. Your issue should be resolved if you save your image using UIImageJPEGRepresentation

score 8 · Answer 2 · answered Jan 22 '20 at 16:26

Swift 5 - Update

This worked for me, just apply this on your UIImage before uploading it.

extension UIImage {

func fixedOrientation() -> UIImage? {
    guard imageOrientation != UIImage.Orientation.up else {
        // This is default orientation, don't need to do anything
        return self.copy() as? UIImage
    }

    guard let cgImage = self.cgImage else {
        // CGImage is not available
        return nil
    }

    guard let colorSpace = cgImage.colorSpace, let ctx = CGContext(data: nil, width: Int(size.width), height: Int(size.height), bitsPerComponent: cgImage.bitsPerComponent, bytesPerRow: 0, space: colorSpace, bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue) else {
        return nil // Not able to create CGContext
    }

    var transform: CGAffineTransform = CGAffineTransform.identity

    switch imageOrientation {
    case .down, .downMirrored:
        transform = transform.translatedBy(x: size.width, y: size.height)
        transform = transform.rotated(by: CGFloat.pi)
    case .left, .leftMirrored:
        transform = transform.translatedBy(x: size.width, y: 0)
        transform = transform.rotated(by: CGFloat.pi / 2.0)
    case .right, .rightMirrored:
        transform = transform.translatedBy(x: 0, y: size.height)
        transform = transform.rotated(by: CGFloat.pi / -2.0)
    case .up, .upMirrored:
        break
    @unknown default:
        break
    }

    // Flip image one more time if needed to, this is to prevent flipped image
    switch imageOrientation {
    case .upMirrored, .downMirrored:
        transform = transform.translatedBy(x: size.width, y: 0)
        transform = transform.scaledBy(x: -1, y: 1)
    case .leftMirrored, .rightMirrored:
        transform = transform.translatedBy(x: size.height, y: 0)
        transform = transform.scaledBy(x: -1, y: 1)
    case .up, .down, .left, .right:
        break
    @unknown default:
        break
    }

    ctx.concatenate(transform)

    switch imageOrientation {
    case .left, .leftMirrored, .right, .rightMirrored:
        ctx.draw(cgImage, in: CGRect(x: 0, y: 0, width: size.height, height: size.width))
    default:
        ctx.draw(cgImage, in: CGRect(x: 0, y: 0, width: size.width, height: size.height))
        break
    }

    guard let newCGImage = ctx.makeImage() else { return nil }
    return UIImage.init(cgImage: newCGImage, scale: 1, orientation: .up)
}

}

score 3 · Answer 3 · answered Feb 22 '19 at 02:02

3

Just an update, UIImageJPEGRepresentation has changed to jpegData in the recent versions of xcode.

jpegData(compressionQuality: 1.0) 1.0 being high quality and 0 being low quality.

answered Feb 22 '19 at 02:02

T-REX

31
2

Swift: Images rotated from portrait to landscape when loaded from Firebase

3 Answers3