Tukukkk

I am trying to merge two different images and create a new one. This is the way I would like to do:
I have this image (A):

It's a PNG image and I would like to merge this one with another image (B) which I took from the phone to create something like this:

I need a function who merge A with B creating C. The size must remain from the A image and the image B should auto adapt the size to fit into the polaroid (A). Is it possible to do that? Thank for your help!

UPDATE
Just one thing, the image (A) is a square and the image i took is a 16:9, how can i fix that?? If i use your function the image (B) that i took become stretched!

Hope this may help you,

var bottomImage = UIImage(named: "bottom.png")

var topImage = UIImage(named: "top.png")



var size = CGSize(width: 300, height: 300)

UIGraphicsBeginImageContext(size)



let areaSize = CGRect(x: 0, y: 0, width: size.width, height: size.height)

bottomImage!.draw(in: areaSize)



topImage!.draw(in: areaSize, blendMode: .normal, alpha: 0.8)



var newImage:UIImage = UIGraphicsGetImageFromCurrentImageContext()!

UIGraphicsEndImageContext()

All the Best :)

This way the overlay picture will be much cleaner

class func mergeImages(imageView: UIImageView) -> UIImage {

 UIGraphicsBeginImageContextWithOptions(imageView.frame.size, false, 0.0) 

 imageView.superview!.layer.renderInContext(UIGraphicsGetCurrentContext()!)

 let image = UIGraphicsGetImageFromCurrentImageContext()

 UIGraphicsEndImageContext()



 return image 

}

Swift 4 UIImage extension that enables easy image merging / overlaying.

extension UIImage { 



  func overlayWith(image: UIImage, posX: CGFloat, posY: CGFloat) -> UIImage {

    let newWidth = size.width < posX + image.size.width ? posX + image.size.width : size.width

    let newHeight = size.height < posY + image.size.height ? posY + image.size.height : size.height

    let newSize = CGSize(width: newWidth, height: newHeight)



    UIGraphicsBeginImageContextWithOptions(newSize, false, 0.0)

    draw(in: CGRect(origin: CGPoint.zero, size: size))

    image.draw(in: CGRect(origin: CGPoint(x: posX, y: posY), size: image.size))

    let newImage = UIGraphicsGetImageFromCurrentImageContext()!

    UIGraphicsEndImageContext()



    return newImage

  }



}

    let imagePickerController = UIImagePickerController()

    imagePickerController.delegate = self

    let actionSheet = UIAlertController(title: "Photo Source", 

    message:  "Choose a source", preferredStyle: .actionSheet)

    actionSheet.addAction(UIAlertAction(title: "Camera", 

       style:.default, handler: {(action: UIAlertAction)in

        if UIImagePickerController.isSourceTypeAvailable(.camera){

            imagePickerController.sourceType = .camera

            self.present(imagePickerController, 

            animated: true,completion: nil)

        }

        else{

            print("camera is not available")

        }  

    }))

    actionSheet.addAction(UIAlertAction(title: "Photo Library", 

                      style:.default, handler: {(action: UIAlertAction)in

        imagePickerController.sourceType = .photoLibrary

        self.present(imagePickerController, animated: true,

                                        completion: nil)



    }))

    actionSheet.addAction(UIAlertAction(title: "Cancle", 

     style: .cancel, handler: nil))

    self.present(actionSheet, animated: true, completion: nil)



  func imagePickerController(_ picker:UIImagePickerController,       

             didFinishPickingMediaWithInfo info: [String : Any]) 

   {

    let image = info[UIImagePickerControllerOriginalImage] as! UIImage

    myImage.image = image

    picker.dismiss(animated: true, completion: nil)

   }

 func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {

    picker.dismiss(animated: true, completion: nil)

     }

Slightly modified version of answer by budidino. This implementation also handles negative posX and posY correctly.

extension UIImage {

    func overlayWith(image: UIImage, posX: CGFloat, posY: CGFloat) -> UIImage {

        let newWidth = posX < 0 ? abs(posX) + max(self.size.width, image.size.width) :

            size.width < posX + image.size.width ? posX + image.size.width : size.width

        let newHeight = posY < 0 ? abs(posY) + max(size.height, image.size.height) :

            size.height < posY + image.size.height ? posY + image.size.height : size.height

        let newSize = CGSize(width: newWidth, height: newHeight)



        UIGraphicsBeginImageContextWithOptions(newSize, false, 0.0)

        let originalPoint = CGPoint(x: posX < 0 ? abs(posX) : 0, y: posY < 0 ? abs(posY) : 0)

        self.draw(in: CGRect(origin: originalPoint, size: self.size))

        let overLayPoint = CGPoint(x: posX < 0 ? 0 : posX, y: posY < 0 ? 0 : posY)

        image.draw(in: CGRect(origin: overLayPoint, size: image.size))

        let newImage = UIGraphicsGetImageFromCurrentImageContext()!

        UIGraphicsEndImageContext()



        return newImage

    }

}

The upvoted answer stretches the background image changing it's ratio. The solution below fixes that by rendering the image from a UIView that contains the two image views as subviews.

ANSWER YOU ARE LOOKING FOR (Swift 4):

func blendImages(_ img: UIImage,_ imgTwo: UIImage) -> Data? {

    let bottomImage = img

    let topImage = imgTwo



    let imgView = UIImageView(frame: CGRect(x: 0, y: 0, width: 306, height: 306))

    let imgView2 = UIImageView(frame: CGRect(x: 0, y: 0, width: 306, height: 306))



    // - Set Content mode to what you desire

    imgView.contentMode = .scaleAspectFill

    imgView2.contentMode = .scaleAspectFit



    // - Set Images

    imgView.image = bottomImage

    imgView2.image = topImage



    // - Create UIView

    let contentView = UIView(frame: CGRect(x: 0, y: 0, width: 306, height: 306))

    contentView.addSubview(imgView)

    contentView.addSubview(imgView2)



    // - Set Size

    let size = CGSize(width: 306, height: 306)



    // - Where the magic happens

    UIGraphicsBeginImageContextWithOptions(size, true, 0)



    contentView.drawHierarchy(in: contentView.bounds, afterScreenUpdates: true)



    guard let i = UIGraphicsGetImageFromCurrentImageContext(),

        let data = UIImageJPEGRepresentation(i, 1.0)

        else {return nil}



    UIGraphicsEndImageContext()



    return data

}

The returned image data doubles the the size of the image, so set the size of the views at half the desired size.

• 
  EXAMPLE: I wanted the width and height of the image to be 612 , so I set the view frames width and height to 306)
  // Enjoy :)