Image background removal using bezierPath in iOS

Question

After searching everywhere I found there is nothing specific source available to remove the background using bezierPath. Basically I am trying to achieve a similar feature like image cutout (You can check PicsArt >> Image editor >> CutOut). In this where user can draw any shape on the image and selected area can be highlighted and the rest of the part is removed.

Here is what I am using to draw the line on image

class DrawingImageView: UIImageView {
    var path = UIBezierPath()
    var previousTouchPoint = CGPoint.zero
    var shapeLayer = CAShapeLayer()
    var isClear: Bool = false {
        didSet {
            updateView()
        }
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        setupView()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    func updateView() {
        self.shapeLayer.shadowOffset = .init(width: 1, height: 1)
        self.shapeLayer.shadowColor = UIColor.black.cgColor
        self.shapeLayer.shadowOpacity = 1

        self.shapeLayer.lineWidth = 20
        self.shapeLayer.lineCap = .round
        self.shapeLayer.strokeColor = isClear ? UIColor.clear.cgColor : UIColor.blue.cgColor
        self.shapeLayer.opacity = 0.3
        self.isUserInteractionEnabled = true
    }

    func setupView() {
        self.layer.addSublayer(shapeLayer)
        updateView()
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesBegan(touches, with: event)
        if let location = touches.first?.location(in: self){
            previousTouchPoint = location
        }
    }

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesMoved(touches, with: event)

        if let location = touches.first?.location(in: self){
            path.move(to: location)
            path.addLine(to: previousTouchPoint)
            previousTouchPoint = location
            shapeLayer.path = path.cgPath
        }
    }
}

To cut out a selected area I tried using cropping(to:) method of CGImage. but it's not working just clearing the entire image. You can check my out below

Plain Image

Selected area [Drawing]

Resultant image after using cropping(to:)

I am not sure if I am doing this correctly. I am open to other ways also.

Answer 1

To "remove the background" you'll want to apply your shape layer as a mask.

Add this func to your DrawingImageView class:

func applyMask() -> Void {
    // set shape opacity to 1.0
    shapeLayer.opacity = 1.0
    // use it as a mask
    layer.mask = shapeLayer
}

Then, in your controller, add a button action to call that func. You should see your desired result:

Here's a complete working example... I also added a bool variable and this func in DrawingImageView to allow switching between "drawing" and "masked" mode, so I can go back and add more to the path.

---

Controller

class RemoveBackgroundViewController: UIViewController {
    
    var theDrawingView: DrawingImageView = DrawingImageView(frame: .zero)
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        guard let img = UIImage(named: "musk") else {
            fatalError("Could not load image!!!")
        }
        
        theDrawingView.image = img
        
        let btn = UIButton()
        btn.setTitle("Apply Mask", for: [])
        btn.setTitleColor(.white, for: .normal)
        btn.setTitleColor(.gray, for: .highlighted)
        btn.backgroundColor = .red
        
        [btn, theDrawingView].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
            view.addSubview($0)
        }
        
        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([

            // center the drawing image view, with 20-pts on each side
            //  sized proportionally to the loaded image
            theDrawingView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
            theDrawingView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
            theDrawingView.centerYAnchor.constraint(equalTo: g.centerYAnchor),
            theDrawingView.heightAnchor.constraint(equalTo: theDrawingView.widthAnchor, multiplier: img.size.height / img.size.width),
            
            // constrain button above the image
            btn.bottomAnchor.constraint(equalTo: theDrawingView.topAnchor, constant: -8.0),
            btn.centerXAnchor.constraint(equalTo: g.centerXAnchor),
            btn.widthAnchor.constraint(equalToConstant: 160.0),
            
        ])
        
        btn.addTarget(self, action: #selector(self.toggleActivity(_:)), for: .touchUpInside)
        
    }
    
    @objc func toggleActivity(_ sender: Any) {
        guard let btn = sender as? UIButton else { return }
        if theDrawingView.isDrawing {
            theDrawingView.applyMask()
            btn.setTitle("Draw More", for: [])
        } else {
            theDrawingView.drawMore()
            btn.setTitle("Apply Mask", for: [])
        }
    }
}

---

DrawingImageView (modified)

class DrawingImageView: UIImageView {
    var path = UIBezierPath()
    var previousTouchPoint = CGPoint.zero
    var shapeLayer = CAShapeLayer()
    
    var isDrawing: Bool = true
    
    var isClear: Bool = false {
        didSet {
            updateView()
        }
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        setupView()
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    func updateView() {
        self.shapeLayer.shadowOffset = .init(width: 1, height: 1)
        self.shapeLayer.shadowColor = UIColor.black.cgColor
        self.shapeLayer.shadowOpacity = 1
        
        self.shapeLayer.lineWidth = 20
        self.shapeLayer.lineCap = .round
        self.shapeLayer.strokeColor = isClear ? UIColor.clear.cgColor : UIColor.blue.cgColor
        self.shapeLayer.opacity = 0.3
        self.isUserInteractionEnabled = true
    }
    
    func setupView() {
        self.layer.addSublayer(shapeLayer)
        updateView()
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesBegan(touches, with: event)
        if !isDrawing { return }
        if let location = touches.first?.location(in: self){
            previousTouchPoint = location
        }
    }
    
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesMoved(touches, with: event)
        if !isDrawing { return }
        if let location = touches.first?.location(in: self){
            path.move(to: location)
            path.addLine(to: previousTouchPoint)
            previousTouchPoint = location
            shapeLayer.path = path.cgPath
        }
    }

    func applyMask() -> Void {
        // set shape opacity to 1.0
        shapeLayer.opacity = 1.0
        // use it as a mask
        layer.mask = shapeLayer
        isDrawing = false
    }
    
    func drawMore() -> Void {
        // remove the mask
        layer.mask = nil
        // set opacity back to 0.3
        shapeLayer.opacity = 0.3
        // add shapeLayer back as sublayer
        self.layer.addSublayer(shapeLayer)
        isDrawing = true
    }
}

Obviously, you'll have a lot more to do, but this should get you on your way.

One being next step is to convert / translate your path from the image view frame to the original image size, and then apply the mask to the image so it can be saved out. That should be a fun exercise for you :)