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")

Where is your code ? provide relevant code Btw https://stackoverflow.com/questions/16878607/change-uiimageview-size-to-match-image-with-autolayout and https://stackoverflow.com/questions/27599275/uiview-frame-size-didnt-change-uiimageview-placed-inside-it might be helpful for you. — iPatel, Oct 16 '17 at 05:24
@iPatel Have you understand my question ? i think you didn't get my question. — Khushbu Desai, Oct 16 '17 at 10:28
I'm not sure I get what the problem is. Do you want to keep the frames of these two image views identical or do you want to use different frame images for landscape and portrait? — Kamil Szostakowski, Oct 18 '17 at 17:53
@KamilSzostakowski i want to use different frame images for landscape and portrait. — Khushbu Desai, Oct 24 '17 at 04:01

Kamil Szostakowski · Accepted Answer · 2017-10-26T15:14:24.507

4

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

edited Oct 26 '17 at 15:14

answered Oct 24 '17 at 17:46

Kamil Szostakowski

2,153
13
19

1

I want to add frame on image so if image is landscape then Frame must be landscape and if Image is portrait then frame must be portrait, i have tried your code but it didn't work for me. its just making image Aspectfit. – Khushbu Desai Oct 25 '17 at 04:16
Do you use a single resource for both landscape and portrait frames or do you have separate ones? – Kamil Szostakowski Oct 25 '17 at 06:51
I am using single resource for both – Khushbu Desai Oct 25 '17 at 07:06
I think you have to rotate it depending on the source image orientation and assign it to the frame image view. I will update my answer soon. – Kamil Szostakowski Oct 25 '17 at 07:23
I updated my answer. I added an actual frame to the example and in the code section, I show how I assign the frame image to the frame image view. Is this what you want to achieve? – Kamil Szostakowski Oct 25 '17 at 15:04
Can you please tell me that what is height and width of FrameImageView? – Khushbu Desai Oct 26 '17 at 04:14
This is 4000x3000 approximately the size of a landscape photo from iPhone7. If you wish I can share my solution on GitHub. – Kamil Szostakowski Oct 26 '17 at 09:37
Please share it – Khushbu Desai Oct 26 '17 at 09:46
I added the link to my solution to the answer. I hope it will help. In case of any doubts, don't hesitate to ask. – Kamil Szostakowski Oct 26 '17 at 15:03
Hey, I am trying to set Portrait image but its appeared as in Given link which will be not good i cant understand that how this image is rotated? Height and width of my image is 431 by 375 can you please help me with this. Link: http://prntscr.com/h2kuma – Khushbu Desai Oct 27 '17 at 05:36
There are two separate resources, landscape and portrait for the source image , take a look at the asset catalog. There is also a single resource for the frame image. This example doesn’t support rotation. – Kamil Szostakowski Oct 27 '17 at 06:24

Codus · Answer 2 · 2017-10-25T05:13:03.357

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)

Are you exactly getting what i want? I want to work with both frame and Image. both are UIImageView. — Khushbu Desai, Oct 25 '17 at 04:31
Yes, my example make `imgFrame` show the image as you want the location and size — Codus, Oct 25 '17 at 05:02
I update my answer to let the answer be closer to your situation — Codus, Oct 25 '17 at 05:12

score 2 · Answer 3 · answered Oct 18 '17 at 06:36

2

Assuming these are the value of your mainImageView and image (Landscape):

mainImageView.frame.size
▿ (500.0, 500.0)
  - width : 500.0
  - height : 500.0

mainImageView.image?.size
▿ Optional<CGSize>
  ▿ some : (1440.0, 800.0)
    - width : 1440.0
    - height : 800.0

You know that the width is 500, the height can be calculated like so: frame.width / image.width * image.height

answered Oct 18 '17 at 06:36

Sean

1,534
12
20

@KhushbuDesai From your explanation, you have a square imageView with a landscaped image. You want to create another frame to fit over the landscaped image (not the square imageView) to create a "frame-effect". Is that what you're asking? – Sean Oct 24 '17 at 14:59
1

Yes, If image inside image view is landscape then i want to add another imageview of same landscape size for adding layer of frame on image view. and i want same from Portrait also. – Khushbu Desai Oct 25 '17 at 04:18

Adding New Frame based on Image inside ImageView for PhotoEditing App

3 Answers3

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

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