以纵向模式从Image Picker(UIImagePickerController)拍摄的照片显示为拉伸状态-Xcode 11/SwiftUI [英] Photos from Image Picker (UIImagePickerController) taken in portrait mode show up stretched - Xcode 11 / SwiftUI

问题描述

我正在使用UIImagePickerController从相机捕获照片或从照片库中进行选择，然后显示图像.这对于横向/水平方向的照片效果很好，但是纵向/垂直方向的照片显示为水平拉伸.

I am using UIImagePickerController to capture a photo from the camera or select from the photo library, and then display the image. This works fine for landscape/horizontal oriented photos, but photos in portrait/vertical orientation are showing up stretched out horizontally.

我已经尝试过.scaledToFit()和.aspectRatio(contentMode:.fit)，但是它仍然显示为拉伸状态.非常感谢您的帮助.

I've tried .scaledToFit() and .aspectRatio(contentMode: .fit), but it still shows up stretched. Any help is very much appreciated.

查看拉伸后的照片

显示图片的代码:

struct AddNewItem: View     {

@State private var showImagePicker: Bool = true
@State private var image: UIImage = nil
@State var showCamera: Bool = false
@State private var showImageEditor: Bool = false


var body: some View {
    VStack {

        Image(uiImage: image ?? UIImage(named: "placeholder")!)
            .resizable()
            .scaledToFit()
            .aspectRatio(contentMode: .fit)

    }
    //Show the photo capture view
    .sheet(isPresented: self.$showImagePicker) {
        PhotoCaptureView(showImagePicker: self.$showImagePicker, image: self.$image, showImageEditor: self.$showImageEditor, showCamera: self.$showCamera)
    }
}

}

图像选择器协调器:

class ImagePickerCoordinator: NSObject, UINavigationControllerDelegate, UIImagePickerControllerDelegate {

@Binding var isShown: Bool
@Binding var image: UIImage?
@Binding var showEditor: Bool

init(isShown: Binding<Bool>, image: Binding<UIImage?>, showEditor: Binding<Bool>) {
    _isShown = isShown
    _image = image
    _showEditor = showEditor
}

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
    let uiImage = info[UIImagePickerController.InfoKey.originalImage] as! UIImage
    image = uiImage
    isShown = false
    showEditor = true
}

func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
    isShown = false
}

}

图像选择器:

struct ImagePicker: UIViewControllerRepresentable {

@Binding var pickerIsShown: Bool
@Binding var image: UIImage?
@Binding var showImageEditor: Bool
@Binding var showCamera: Bool

func updateUIViewController(_ uiViewController: UIImagePickerController, context: UIViewControllerRepresentableContext<ImagePicker>) {

}

func makeCoordinator() -> ImagePickerCoordinator {
    return ImagePickerCoordinator(isShown: $pickerIsShown, image: $image, showEditor: $showImageEditor)
}

func makeUIViewController(context: UIViewControllerRepresentableContext<ImagePicker>) -> UIImagePickerController {

    let picker = UIImagePickerController()

    if showCamera {
        picker.sourceType = .camera
    } else {
        picker.sourceType = .photoLibrary
    }

    picker.delegate = context.coordinator

    return picker
}

}

照片捕获视图:

struct PhotoCaptureView: View {

@Binding var showImagePicker: Bool
@Binding var image: UIImage?
@Binding var showImageEditor: Bool
@Binding var showCamera: Bool

var body: some View {
    ImagePicker(pickerIsShown: $showImagePicker, image: $image, showImageEditor: $showImageEditor, showCamera: $showCamera)
}

}

推荐答案

我遇到了同样的问题.我设法通过在makeUIViewController函数内部将editingMode设置为true来避免这种情况:

I'm having the same issue. I managed to avoid it by turning editingMode to true inside the makeUIViewController function:

func makeUIViewController(context: UIViewControllerRepresentableContext<ImagePicker>) -> UIImagePickerController {
    let imagePicker = UIImagePickerController()
    imagePicker.allowsEditing = true
    imagePicker.delegate = context.coordinator
    return imagePicker
}

并使用带有信息功能的didFinishPickingMedia内部的已编辑图像而不是原始图像:

And by using the edited image instead of the original one inside the didFinishPickingMedia with info function:

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        guard let image = info[.editedImage] as? UIImage else {
            print("No image found")
            return
        }
        parent.imageController.originalImage = image
        parent.showImagePicker = false
    }

这可以防止图像被拉伸.但是，用户只能选择裁剪为正方形的照片.我正在努力解决..

This prevents the image from being stretched. However the user is only able to choose a photo that gets cropped a as square. Im working on a workaround..

这篇关于以纵向模式从Image Picker(UIImagePickerController)拍摄的照片显示为拉伸状态-Xcode 11/SwiftUI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！