1

I am using AsyncImage to download a jpg from my Parse Server. If I download the file manually it has an orientation of 6 (90 Degree counterclockwise), but when the file is returned by AsyncImage, it is missing this orientation and appears rotated.

As an aside, when I substitute SBPAsyncImage for AsyncImage, the orientation is correct.

Is there away for AsyncImage to detect and correct for orientation?

            AsyncImage(url: photoURL) { image in
                    image
                        .resizable()
                        .scaledToFill()
                        .frame(width: 200, height: 200, alignment: .leading)
                    } placeholder: {
                         ProgressView()
                    }

Edit: I was over zealous in simplifying the code. Orientation is correct when AsyncImage is displayed in a simple View but my layout has a list of ScrollViews displaying the images fetched from a Parse Server. Here is a version of the original:

struct TimeLineView: View {
//: A view model in SwiftUI
@StateObject var viewModel = PFTour.query(matchesKeyInQuery(key: "routeID", queryKey: "uniqueID", query: PFRoute.query("state" == "Colorado")))
    .order([.descending("date")])
    .include("route")
    .include("creator")
    .include("photos")
    .viewModel

    var body: some View {
    Group {
        if let error = viewModel.error {
            Text(error.description)
        } else {
            List(viewModel.results, id: \.id) { tour in
                ParseTourImageOnlyScrollView(tour: tour)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
        }
        Spacer()
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
    .edgesIgnoringSafeArea(.all)
    .onAppear(perform: {
        viewModel.find()
    })
}

Each cell displays a ScrollView:

struct ParseTourImageOnlyScrollView: View {
let tour: PFTour
var body: some View {
    VStack {
        Divider()
        ScrollView(.horizontal) {
            HStack(spacing: 5.0) {
                if let photos = tour.photos {
                ForEach(photos, id: \.self) { parsePhoto in
                    PhotoOnlyView(photoFile: parsePhoto.photo!)
                }
                }
            }
        }
        Divider()
        Spacer()
    }
}

When comparing AsyncImage with BackPortAsyncImage, the former does not show the correct orientation for the image data at https://parsefiles.back4app.com/zgqRRfY6Tr5ICfdPocRLZG8EXK59vfS5dpDM5bqr/7d5eaf509e0745be0314aa493099dc82_file.bin:

struct PhotoOnlyView: View {
let photoFile: ParseFile
var body: some View {
    if #available(iOS 15.0, *) {
        VStack{
            SwiftUI.AsyncImage(url: photoFile.url) { image in
                    image
                        .resizable()
                        .scaledToFill()
                } placeholder: {
                    ProgressView()
                }
                .frame(width: UIScreen.main.bounds.size.width - 150, height: UIScreen.main.bounds.size.width - 150, alignment: .leading)

            BackportAsyncImage(url: photoFile.url) { image in
                    image
                        .resizable()
                        .scaledToFill()
                } placeholder: {
                    ProgressView()
                }
                .frame(width: UIScreen.main.bounds.size.width - 150, height: UIScreen.main.bounds.size.width - 150, alignment: .leading)
        }
    }
    else {
        ProgressView()
    }
}

enter image description here

David
  • 305
  • 2
  • 10
  • do you have a demo `photoURL` that we could use to test various options? – workingdog support Ukraine Sep 07 '22 at 01:43
  • This is the data file for one of the photos I was testing- https://parsefiles.back4app.com/zgqRRfY6Tr5ICfdPocRLZG8EXK59vfS5dpDM5bqr/7d5eaf509e0745be0314aa493099dc82_file.bin – David Sep 08 '22 at 02:12
  • I could not replicate your issue. All works well for me in my tests. The photos have the same orientation, for both local file test and directly from the url. – workingdog support Ukraine Sep 08 '22 at 02:54
  • I just discovered if I use phase.image the orientation is not correct but the code in the original question does work. – David Sep 10 '22 at 19:09
  • So, the code you show has nothing to do with your question, that is not the code that produces the error, is that correct? – workingdog support Ukraine Sep 10 '22 at 22:44
  • I've tested my code with `AsyncImage(url: photoURL) { phase in ...}` and all still works very well, no orientation distortion. I suspect the code you are showing us is not the code you are using, is that correct? – workingdog support Ukraine Sep 11 '22 at 04:16
  • Yes I apologize, I tried to simplify the code but obviously failed. The original was a ScrollView embedded in a List with data fetched from a Parse Server. I'll update the question. – David Sep 12 '22 at 00:49

0 Answers0