imageview not updated accordingly

Question

i want to create an imageview with photo selected from photo library and display in the scrollview by pushing a button. But the image is not displayed after selection but only display when I push the button again. Can someone help me with this one please?

@IBAction func imageBtnPressed(_ sender: Any) {

    imagePicker()

    let imageView = UIImageView(frame: CGRect(x: (scrollView.bounds.size.width-200)/2, y:(scrollView.bounds.size.height-100)/2, width: 200, height: 100))
    imageView.image = imageOnCanvas
    imageView.contentMode = .scaleAspectFill
    imageView.clipsToBounds = true
    scrollView.addSubview(imageView)

}


func imagePicker(){
    let imagePicker = UIImagePickerController()
    imagePicker.delegate = self
    imagePicker.sourceType = .photoLibrary
    imagePicker.allowsEditing = false
    present(imagePicker, animated: true, completion: nil)
}


func imagePickerControllerDidCancel(_ picker: UIImagePickerController)
{
    dismiss(animated: true, completion: nil)
}


func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {

    let selectedImage = info[.originalImage] as? UIImage
    imageOnCanvas = selectedImage
    dismiss(animated: true, completion: nil)
}

Answer 1

Your code does not pause just because the UIImagePickerController is presented. So, let's look at your code:

@IBAction func imageBtnPressed(_ sender: Any) {
    imagePicker()
    let imageView = UIImageView(frame: CGRect(x: (scrollView.bounds.size.width-200)/2, y:(scrollView.bounds.size.height-100)/2, width: 200, height: 100))
    imageView.image = imageOnCanvas
    imageView.contentMode = .scaleAspectFill
    imageView.clipsToBounds = true
    scrollView.addSubview(imageView)
}
func imagePicker(){
    let imagePicker = UIImagePickerController()
    imagePicker.delegate = self
    imagePicker.sourceType = .photoLibrary
    imagePicker.allowsEditing = false
    present(imagePicker, animated: true, completion: nil)
}

So that is exactly like saying (substituting the contents of the imagePicker function for the function call):

@IBAction func imageBtnPressed(_ sender: Any) {
    let imagePicker = UIImagePickerController()
    imagePicker.delegate = self
    imagePicker.sourceType = .photoLibrary
    imagePicker.allowsEditing = false
    present(imagePicker, animated: true, completion: nil)
    let imageView = UIImageView(frame: CGRect(x: (scrollView.bounds.size.width-200)/2, y:(scrollView.bounds.size.height-100)/2, width: 200, height: 100))
    imageView.image = imageOnCanvas
    imageView.contentMode = .scaleAspectFill
    imageView.clipsToBounds = true
    scrollView.addSubview(imageView)
}

Well, as you can clearly see, you are referring to imageOnCanvas when it has not been set yet. The imagePicker is still showing; the user has not chosen a photo yet. But your code has completely come to an end. You've gone on to add a subview consisting of the image view containing the image that was in imageOnCanvas before the code started.