CODEWITHSUNDEEP
iosxcodeswiftphoto
Wivvle
Wivvle

Reputation: 51

Swift how to place pictures on top of pictures

I would like to make an app which enables you to take a photo and then choose from a set of pre made "pictures" as you will to apply on top of that photo.

For example, you take a photo of someone and then apply a mustage, a chicken in it and fake lips.

App example is Aokify app.

However searched all corners of the internet but can't find an example that points me in the right direction.

Upvotes: 2

Views: 7628

Answers (3)

Lytic
Lytic

Reputation: 806

Another more simple implementation may be to use a UIImageView as a parent view, then add a UIImageView as a subview for any images you wish to overlay on top of the original.

let mainImage = UIImage(named:"main-pic")
let overlayImage = UIImage(named:"overlay")

var mainImageView = UIImageView(image:mainImage)
var overlayImageView = UIImageView(image:overlayImage)

self.view.addSubview(mainImageView)
mainImageview.addSubview(overlayImageView)

Edit: Since this has become the accepted answer, I feel it is worth mentioning that there are also different options for positioning the overlayImageView: you can add the overlay to the same parent after the first view has been added, or you can add the overlay as a subview of the main imageView as the example demonstrates.

The difference is the frame of reference when setting the coordinates for your overlay frame: whether you want them to have the same coordinate space, or whether you want the overlay coordinates to be relative to the main image rather than the parent.

Upvotes: 2

Nikhil Manapure
Nikhil Manapure

Reputation: 3878

For answering the question properly and fulfilling the requirement, you will need to add option for moving and placing the overlay image at proper position according to the original image but the code for adding one image over another image will be the following one-

For Swift3

extension UIImage {
    func overlayed(with overlay: UIImage) -> UIImage? {
        defer {
            UIGraphicsEndImageContext()
        }
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        self.draw(in: CGRect(origin: CGPoint.zero, size: size))
        overlay.draw(in: CGRect(origin: CGPoint.zero, size: size))
        if let image = UIGraphicsGetImageFromCurrentImageContext() {
            return image
        }
        return nil
    }
}

Usage-

image.overlayed(with: overlayImage)

Also available here as a gist.

The code was originally written to answer this question.

Upvotes: 2

Wivvle
Wivvle

Reputation: 51

Thanks to jesses.co.tt for providing the hint i needed.

The method is called UIGraphicsContext.

And the tutorial i finally found that did it: https://www.youtube.com/watch?v=m1QnT72I6f0 it's by thenewboston.

Upvotes: 0

Related Questions