使用图像选择器swiftUI显示图像

时间:2020-05-23 13:45:43

标签: swift uiimageview swiftui firebase-storage

我有一个用于处理图像选择器的ImagePicker.swift文件

import SwiftUI

struct ImagePicker: UIViewControllerRepresentable {
    @Binding var showImagePicker: Bool
    @Binding var pickedImage: Image
    @Binding var imageData: Data
    func makeUIViewController(context: UIViewControllerRepresentableContext<ImagePicker>) -> UIImagePickerController {
    let imagePicker = UIImagePickerController()
    imagePicker.delegate = context.coordinator
    return imagePicker
}

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

func makeCoordinator() -> ImagePicker.Coordinator {
    //Coordinator(self)
    Coordinator.init(self)
}

class Coordinator: NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
    var parentImagePicker: ImagePicker

    init(_ imagePicker: ImagePicker) {
        self.parentImagePicker = imagePicker
    }

    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        let uiImage = info[UIImagePickerController.InfoKey.originalImage] as! UIImage
        parentImagePicker.pickedImage = Image(uiImage: uiImage)
        if let mediaData = uiImage.jpegData(compressionQuality: 0.5) {
            parentImagePicker.imageData = mediaData
            print(parentImagePicker.imageData)
        }
        parentImagePicker.showImagePicker = false

    }

    func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
        parentImagePicker.showImagePicker = false
    }

}

}

我在ProfileView中这样调用它:

.sheet(isPresented: $profileViewModel.showImagePicker) {
        ImagePicker(showImagePicker: self.$profileViewModel.showImagePicker, pickedImage: self.$profileViewModel.image, imageData: self.$profileViewModel.imageData)
    }

在我的ProfileViewModel中,我进行了以下设置:

var image: Image = Image("user-placeholder")

在我的profileView即时消息中,像这样显示当前已登录的配置文件图片

                URLImage(URL(string: self.session.userInSession!.profileURL)!,
                 content:  {
                    $0.image
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: 130, height: 130)
                        .cornerRadius(15)
                        .overlay(
                            Image(systemName: "plus.circle.fill")
                                .foregroundColor(.gray)
                                .font(.largeTitle)
                            ,alignment: .bottomTrailing)
                        .onTapGesture {
                            self.profileViewModel.showImagePicker = true
                        }
                    }
                )
            }

我正在使用url-image软件包。

在问题IM具有是当我在图像上点击以选择要上载新的图像,在选择图像时,片材闭合,它仍然显示旧的图像,直到我点击更新,改变视图和回来视图,然后显示新图像。我需要它来更新选中时显示的图像。

在我的profileViewModel中,我有一个函数:

   func LoadAUser(userId: String) {
    Firestore.firestore().collection("users").document(userId).getDocument{(snapshot, error) in
        guard let snap = snapshot else {
            print("error fetching data")
            return
        }
        let dict = snap.data()
        guard let decodedUser = try? User.init(fromDictionary: dict!) else { return }
        print("decoded user - load user - \(decodedUser)")
        self.bio = decodedUser.bio
        self.occupation = decodedUser.occupation
        self.city = decodedUser.city

        print("updated bio to - \(self.bio)")
    }
}

在ProfileView中调用哪个:

    func loadUserData() {
    profileViewModel.LoadAUser(userId: Auth.auth().currentUser!.uid)
    let storageRoot = Storage.storage().reference(forURL: "gs://my.appspot.com").child("avatar").child(Auth.auth().currentUser!.uid)
    storageRoot.downloadURL{(url, error) in
        if error != nil {
            print(error!.localizedDescription)
            return
        }
        let profileDownload = url?.absoluteString
        self.session.userInSession?.profileURL = profileDownload!
    }
}

并且每次调用该视图时都会这样调用:

.onAppear(perform: loadUserData)

0 个答案:

没有答案