UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

Image View becoming stretched along x-axis

Forums > SwiftUI

In the app I'm working on the user can select an image from their library and add it to an event. The code is written entirely in SwiftUI but I am using a UIViewControllerRepresentable for the ImagePicker. That piece of code was directy from the 100DaysOfSwiftUI "Instafilter" project.

If the user has already selected an image its uuid is stored in CoreData and returned from this method as a small thumbnail view. And now that I write this I see I need to fix that force-unwrap. I'll do it!

Thumbnail

loadUserImage(uuid: savedRunEvent.imageID!)
                                .resizable()
                                .scaledToFill()
                                .frame(width: 90, height: 90, alignment: .center)
                                .cornerRadius(20)
                                .shadow(radius: 2)
                                .onTapGesture { self.showImagePopup = true }

If the user taps the thumbnail image they are presented with a popup view with a large-scale version of the image. That image is displayed inside a .frame()

VStack {
            // The popup
            if willShowImagePopUp {
                ZStack {
                    Color.secondary
                        .opacity(0.5)
                        .edgesIgnoringSafeArea(.all)
                    VStack(spacing: 15) {
                        Spacer()
                        image
                            .resizable()
                            .scaledToFit()
                            .cornerRadius(20)
                            .shadow(radius: 2)
                        Button("Change Photo") {
                            self.showImagePicker = true
                        }
                        .font(.headline)
                        .padding(.bottom)
                        .frame(maxWidth: .infinity)
                    }
                    .shadow(radius: 10)
                    .background(Color.white)
                    .cornerRadius(20)
                    .padding(.horizontal, 25)
                    .frame(height: 500)

                    .offset(dragOffset)
                    .rotationEffect(Angle(degrees: Double(dragOffset.width / 2)), anchor: .bottom)
                    .gesture(DragGesture(minimumDistance: 25).updating($dragOffset, body: { (value, popupOffset, transaction) in
                        popupOffset = value.translation
                    }).onEnded({ value in
                        self.willShowImagePopUp = false
                    }))
                }.animation(.default)

            }
            Spacer()
        }

Full

Most pictures display properly but some become stretched along the x-axis. I cannot find a rhyme or reason behind which images display properly and which do not. One theory I have is lower quality images become stretched, but I am not certain. Any insights are appreciated.

Here is an example of a distorted image.

Distorted

4      

Use GeometryReader (https://developer.apple.com/documentation/swiftui/geometryreader) maybe?

The original images are not the same size, are they?

3      

I have tried using GeometryReader with the same results, but perhaps I'll tinker with it some more. I cannot find a relationship between the size of an image that works and one that doesn't work. For example an image that doesn't work was taken with the back camera of my iPhone 8+, is 3032 x 4032 and is 1.1mb. While an image that does work is exactly the same dimensions, taken with the back camera of my iPhone 8+ but is 1.7mb. This leads me to belive it is simply a SwiftUI bug, but I just don't know.

3      

Best place to start troubleshooting is to give the image its own frame modifier.

5      

Any luck with this Dan?

3      

No luck. The more I play with it the more I think it's a bug. I litterally have two photos in my library taken a half second apart of the same subject. One displays correctly, the other gets squished and stretched. Perhaps someone will run across a similar issue and find a solution, but for now I'm moving on to other areas of the app. Thank you for checking and I'll keep an eye on this of course in case anyone has more suggestions.

3      

Update: After the Xcode 11.4 update it appears most photos now display correctly. Photos which definitely resized improperly before, now have no issues. However I can still occasionally select a photo from the library which resizes improperly. It might have something to do with whether or not the photo was offloaded from the phone, which then needs to be redownloaded from iCloud. But I can't be sure.

3      

@GeoMod, does this solve the issue completely?

Image(uiImage: uiImage)
  .resizable()
  .aspectRatio(uiImage.size, contentMode: .fit)

Found this on another Hw/S forum-q&a:

https://www.hackingwithswift.com/forums/100-days-of-swiftui/day-77-images-on-real-iphone-are-distorted/938

3      

Hacking with Swift is sponsored by RevenueCat

SPONSORED Take the pain out of configuring and testing your paywalls. RevenueCat's Paywalls allow you to remotely configure your entire paywall view without any code changes or app updates.

Learn more here

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.