Adding New Frame based on Image inside ImageView for PhotoEditing App

Question

I am working on Photo Editing app, i need to add Frame on image basically i have used Another UIImageView with Same frame of my original UIImageView and simply adding png image. Now issue is i need Frame based on Height and Width of Frame inside Image View.

as in above image my frame is appeared in whole UIImageView but my image inside Imageview is Landscape so if my image inside Imageview is landscape then i need Landscape frame and if image is Portrait then i need portrait frame. How do i achieve this ?

i have using 2 Image view with same height width one is original image view and another is Frame imageview Now i have applying image using following code

outlet of Image from StoryBoard

@IBOutlet var imgFrame: UIImageView!

Applying frame to ImageView

                imgFrame.isHidden = false
                imgFrame.image = #imageLiteral(resourceName: "Frame-Style-1.png")

Answer 1

I think you need two things.

Keep the size of the frame UIImageView the same as the source UIImageView.

To configure this, you have to align the top, bottom, leading and trailing anchors of the frame image view to the corresponding anchors of the source image view.

Adjust the size of the source UIImageView to the size of an image.

The easiest thing you can do for adjusting the UIImageView size to the size of the UIImage is using the aspect ratio constraint. What's more, I configured content mode of both UIImageView as scale to fill.

let image = UIImage(named: "portrait")!
let aspectRatio = image.size.height / image.size.width

let aspectRatioConstraint = NSLayoutConstraint(item: userImageView,attribute: .height,relatedBy: .equal,toItem: userImageView,attribute: .width,multiplier: aspectRatio,constant: 0)

userImageView.image = image
userImageView.addConstraint(aspectRatioConstraint)

frameImageView.image = UIImage(named: "landscape-frame")

You also have to position source UIImageView inside the view controller but I leave it up to you. This is the example result I achieved using this code.

This is the link to the example project on GitHub

Answer 2

make innerImageview display image like .scaleAspectFit without space:

func set(image: UIImage, to imageView: UIImageView) {
    // 1. find sizeScale
    let sizeScaleX = imgFrame.frame.width / image.size.width
    let sizeScaleY = imgFrame.frame.height / image.size.height
    let sizeScale = sizeScaleX > sizeScaleY ? sizeScaleX : sizeScaleY

    // 2. change imageView's frame
    imageView.frame.size = CGSize(width: image.size.width*sizeScale, height: image.size.height*sizeScale)

    // 3. center imageView
    imageView.frame.origin.x = (imgFrame.frame.width-imageView.frame.width)/2
    imageView.frame.origin.y = (imgFrame.frame.height-imageView.frame.height)/2
}

// image is the image what you got (from library/camera or anywhere)
// 1. set image to imgFrame which contain space
imgFrame.image = image
// 2. generate a new image without space
var innerImageView = UIImageView()
set(image: image, to: innerImageView)
// 3. add frame on image
imgFrame.addSubview(innerImageView)