iosswiftface-detectionbadgecifacefeature

Cut rounded image with the face from CIDetector and CIFaceFeature


How to cut the frame that I receive as faceViewBounds to make a big circle around the face? It's like a badge with the face of the person.

Maybe I should get the center of faceViewBounds then I have to find this center in theImageView.image and draw a circle with big diameter and then cut the rest outside of the circle by logic, but with code I don't know how to do it.. Any suggestions?

func detectFaceFrom(ImageView theImageView: UIImageView) {

    guard let personImage = CIImage(image: theImageView.image!) else {
        return
    }

    let accuracy = [CIDetectorAccuracy: CIDetectorAccuracyLow]
    let faceDetector = CIDetector(ofType: CIDetectorTypeFace, context: nil, options: accuracy)
    let faces = faceDetector?.features(in: personImage)

    let ciImageSize = personImage.extent.size
    var transform = CGAffineTransform(scaleX: 1, y: -1)
    transform = transform.translatedBy(x: 0, y: -ciImageSize.height)
    if(faces?.count==1){
        for face in faces as! [CIFaceFeature] {
            var faceViewBounds = face.bounds.applying(transform)

            let viewSize = theImageView.bounds.size
            let scale = min(viewSize.width / ciImageSize.width,
                            viewSize.height / ciImageSize.height)
            let offsetX = (viewSize.width - ciImageSize.width * scale) / 2
            let offsetY = (viewSize.height - ciImageSize.height * scale) / 2

            faceViewBounds = faceViewBounds.applying(CGAffineTransform(scaleX: scale, y: scale))
            faceViewBounds.origin.x += offsetX
            faceViewBounds.origin.y += offsetY

            let faceBox = UIView(frame: faceViewBounds)
            faceBox.layer.borderWidth = 3
            faceBox.layer.borderColor = UIColor.green.cgColor
            faceBox.backgroundColor = UIColor.clear

            drawCircleFromCenter(faceViewBounds.center ???

        }
        return cuttedCircleWithFace
    }else{
        return theImageView.image
    }
}

I just saw an ad in Facebook with that exact same thing that I want to accomplish:

badges


Solution

  • The problem is that you should use your image.size instead of using theImageView.bounds.size. You should also handle features options CIDetectorImageOrientation.

    extension UIImage{
        var faces: [UIImage] {
            guard let ciimage = CIImage(image: self) else { return [] }
            var orientation: NSNumber {
                switch imageOrientation {
                case .up:            return 1
                case .upMirrored:    return 2
                case .down:          return 3
                case .downMirrored:  return 4
                case .leftMirrored:  return 5
                case .right:         return 6
                case .rightMirrored: return 7
                case .left:          return 8
                }
            }
            return CIDetector(ofType: CIDetectorTypeFace, context: nil, options: [CIDetectorAccuracy: CIDetectorAccuracyLow])?
                .features(in: ciimage, options: [CIDetectorImageOrientation: orientation])
                .compactMap {
                    let rect = $0.bounds.insetBy(dx: -10, dy: -10)
                    UIGraphicsBeginImageContextWithOptions(rect.size, false, scale)
                    defer { UIGraphicsEndImageContext() }
                    UIImage(ciImage: ciimage.cropped(to: rect)).draw(in: CGRect(origin: .zero, size: rect.size))
                    guard let face = UIGraphicsGetImageFromCurrentImageContext() else { return nil }
                    // now that you have your face image you need to properly apply a circle mask to it
                    let size = face.size
                    let breadth = min(size.width, size.height)
                    let breadthSize = CGSize(width: breadth, height: breadth)
                    UIGraphicsBeginImageContextWithOptions(breadthSize, false, scale)
                    defer { UIGraphicsEndImageContext() }
                    guard let cgImage = face.cgImage?.cropping(to: CGRect(origin: CGPoint(x: size.width > size.height ? (size.width-size.height).rounded(.down)/2 : 0, y: size.height > size.width ? (size.height-size.width).rounded(.down)/2 : 0), size: breadthSize))
                        else { return nil }
                    let faceRect = CGRect(origin: .zero, size: CGSize(width: min(size.width, size.height), height: min(size.width, size.height)))
                    UIBezierPath(ovalIn: faceRect).addClip()
                    UIImage(cgImage: cgImage).draw(in: faceRect)
                    return UIGraphicsGetImageFromCurrentImageContext()
                } ?? []
        }
    }
    

    let profilePicture = UIImage(data: try! Data(contentsOf: URL(string:"https://i.sstatic.net/Xs4RX.jpg")!))!
    if let face =  profilePicture.faces.first {
        print(face.size)
    }