iOS: Image blending with Core Graphics - ios

Question

I would like to blend two images using Core Graphics.
For example, I have an image:
This image represents the frame. I would like to have this image sliceable.
Another image represents the background:
What I am trying to achieve, is to blind those two images like:
The important thing, that this image might not necessary be circle. It might be sliceable.
How can I achieve this by using Core Graphics?

Answer 1

Try following method that uses masking (maskImage is the one that represents "frame", so in your example it would be that black circle, surrounding of the black circle has to be transparent):
import UIKit
class ViewController: UIViewController {
fileprivate let imageView = UIImageView()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(imageView)
imageView.clipsToBounds = true
imageView.translatesAutoresizingMaskIntoConstraints = false
let cons = [
imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
imageView.heightAnchor.constraint(equalToConstant: 130),
imageView.widthAnchor.constraint(equalToConstant: 300),
]
NSLayoutConstraint.activate(cons)
setup(image: #imageLiteral(resourceName: "image"), withMask: #imageLiteral(resourceName: "masking"))
}
fileprivate func setup(image: UIImage, withMask maskImage: UIImage) {
imageView.superview?.layoutIfNeeded()
imageView.image = maskImage
let slicedMask = captureView(imageView: imageView)
imageView.image = image
let mask = CALayer()
mask.contents = slicedMask.cgImage
mask.frame = imageView.bounds
imageView.layer.mask = mask
}
func captureView(imageView: UIImageView) -> UIImage {
UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, false, UIScreen.main.scale)
let context: CGContext = UIGraphicsGetCurrentContext()!
imageView.layer.render(in: context)
let img: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return img
}
}
I deal with slicing here quite "hacky": first I render the mask in the imageView to get it sliced, then I take a "screenshot" of the rendered sliced mask, and use the screenshot as a mask.
Keep in mind that mask.frame = imageView.bounds has to set frame properly, thus at that point the layout should be done. If later layout of the image changes, you will have to setup the mask again. mask.frame always have to fit the imageView.bounds (so if the layout changes in time, re-setup the image after layout changed).