iOS 使用 Vision 识别照片人脸

Vision 是 Apple 在 WWDC 2017 推出的图像识别框架，它基于 Core ML。在这里，我们利用其中的面部识别功能来检测一张照片中的人物面部，如果没有检测到面部那么弹出 Alert 提示用户检测失败。关于 Vision 框架的概述和基本使用步骤见Vision 概览。

在开始前，我们先使用 Xcode 9 创建一个新的工程，名字随意～

我们先简单的规划一下所需要的功能：

• 在 UIImagePickerController 中获取相册图片
• 获取图片之后立即检测面部信息
• 如果没有检测成功，弹出 Alert 提示检测失败
• 如果检测成功，利用提供的数据在图形上下文（CGContext）中绘制矩形框
• 所有业务都在默认的 ViewController 中完成

哟西，让我们来一步一步地实现吧！

1.首先，我们需要几个全局属性

// 存放 request 的数组
var request = [VNRequest]()

// 图片选择器
let imagePicker = UIImagePickerController()

// 将最终合成的图片放在这个 ImageView 中显示
var detectImageView = UIImageView()

// 准备处理的图片
var detectImage: UIImage?

// 获得屏幕尺寸的计算属性
var screenSize: CGSize {
        return UIScreen.main.bounds.size
}

另外，我们需要让 ViewController 遵循这两个协议：

• UIImagePickerControllerDelegate
• UINavigationControllerDelegate

并且在 AppDelegate 中设置导航控制器（UINavigationController）为根控制器，ViewController 为导航控制器的根视图：

let rootVC = ViewController()
let navigationVC = UINavigationController(rootViewController: rootVC)

window?.rootViewController = navigationVC

2.初始化各种控制器、视图和 Request
我们在 viewDidLoad 中做一些初始化工作：

detectImageView.frame = CGRect(x: 0, y: 0, width: screenSize.width, height: screenSize.height)
detectImageView.contentMode = .scaleAspectFit
// CGContext 渲染出来的图片会倒置，在这里直接把 view 再反转一次就好了
detectImageView.layer.transform = CATransform3DMakeRotation(CGFloat.pi, 1, 0, 0)
self.view.addSubview(detectImageView)
// 设置 imagePicker 的类型和代理
imagePicker.sourceType = .photoLibrary
imagePicker.delegate = self
// 给导航栏添加一个按钮，pickImage(sender:) 方法一会儿会讲到
self.navigationItem.setRightBarButton(UIBarButtonItem(title: "Photo",
                                                      style: .done,
                                                      target: self,
                                                      action: #selector(ViewController.pickImage(sender:))),
                                                      animated: false)
// 重要！
// 创建 VNDetectFaceLandmarksRequest，在这里把 Handler 单独抽成一个方法了，比起闭包更易读，下面就会讲到这个方法
let faceLandmarks = VNDetectFaceLandmarksRequest(completionHandler: self.faceLandmarksHandler)
request = [faceLandmarks]

3.实现 imagePicker 的代理方法并处理返回的图片

// 这个方法就是导航栏按钮对应的 target action
@objc func pickImage(sender: UIButton) {
        self.present(imagePicker, animated: true, completion: nil)
}

func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
        // Did cancel pick image
        self.dismiss(animated: true, completion: nil)
}
    
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
        // 如何使用 info 这个字典这里就不说了，不熟悉的可以查查资料，这里的重点在下面～
        guard let image = info[UIImagePickerControllerOriginalImage] as? UIImage else { return }
        self.dismiss(animated: true, completion: nil)
        
        self.detectImage = image
       
        // 我们在最开始创建了 request，那么这里就创建 requestHandler
        // 在 handler 创建之后，就调用 perform(_:) 方法执行 request
        let faceLandmarksHandler = VNImageRequestHandler(cgImage: (self.detectImage?.cgImage)!, options: [:])
        do {
            try faceLandmarksHandler.perform(self.request)
        } catch {
            print(error)
        }
}

4.现在我们有了入口，有了图片，剩下的就是完成数据的分析和使用
首先是刚才被抽出来的闭包，写成方法就应该是这样：

func faceLandmarksHandler(request: VNRequest, error: Error?) {
        DispatchQueue.main.async {
            self.observation(request.results as! [VNFaceObservation])
        }
}

为了提高性能我们就在主线程里异步完成了 observation 的调用，observation 作为整个流程的核心步骤，将完成剩下所有的任务：

func observation(_ observation: [VNFaceObservation]) {
        // 这里就完成了面部识别成功与否的检查，原因：
        // landmarks 属性有两种情况为 nil，一是我们使用 VNDetectFaceRectanglesRequest 时，二是没有检测到面部时
        guard let img = detectImage, let _ = observation.first?.landmarks else {
            DispatchQueue.main.async {
                let alert = UIAlertController(title: "Detect failed", message: "Invalid face bounding", preferredStyle: .alert)
                let action = UIAlertAction(title: "OK", style: .cancel, handler: nil)
                alert.addAction(action)
                self.present(alert, animated: true, completion: nil)
            }
            return
        }
      // 由于图片在 imageView 中以适应（fit）方式填充，所以会有比例缩放
        // 这里就需要计算这个比例是多少，为什么需要这个比例请看下方
        let imageScale: CGFloat = screenSize.width/img.size.width
        var s = img.size
        s.width *= imageScale
        s.height *= imageScale
       
        // 开启一个位图上下文
        // 如果说没有刚才的比例值，在这里直接引用图片的 size，那么位图上下文就会过大或过小，最终导致我们绘制的矩形框产生位置偏移
        UIGraphicsBeginImageContextWithOptions(CGSize(width: screenSize.width, height: img.size.height*imageScale), false, 1)
        // 开启图形上下文
        let context = UIGraphicsGetCurrentContext()
      // 绘制矩形框的方法，实现请往后看
        detectImageView.image = faceBoundingBox(img: img,
                                              imageScale: imageScale,
                                              observation: observation,
                                              graphicsContext: context)
        // 关闭位图上下文
        UIGraphicsEndImageContext()
    }

利用图形上下文绘制矩形框，然后在位图上下文中渲染成可供显示的 image：

private func faceBoundingBox(img: UIImage, imageScale: CGFloat, observation: [VNFaceObservation], graphicsContext: CGContext?) -> UIImage? {
        // 这里同样需要一个比例，来让图片渲染正确
        var s = img.size
        s.width *= imageScale
        s.height *= imageScale
        
        graphicsContext?.draw(img.cgImage!, in: CGRect(x: 0, y: 0, width: screenSize.width, height: img.size.height*imageScale))
                // 这里的 scaled 是一个 CGRect 的扩展（extension），具体实现可以从完整代码中找到，完整代码下载见本篇最后
        graphicsContext?.addRect((observation.first?.boundingBox)!.scaled(to: s))
        graphicsContext?.setLineWidth(0.8)
        graphicsContext?.setStrokeColor(UIColor.green.cgColor)
        graphicsContext?.strokePath()
      // 从现有的上下文堆栈中生成一张 UIImage 图片
        let image = UIGraphicsGetImageFromCurrentImageContext()
        
        return image
    }

OK，至此你应该会有一个能够检测照片人脸的小 Demo 了～
Demo 中有很多没有详细解释的东西，比如 UIImagePickerController 的具体用法，CGContext 的具体用法等，因为不在本篇主要内容的范围内，所以不做太多提及，如果这方面有疑问可以查查百度，或者来问我也行，大家一起共同交流 (//∇//)\

Demo 完整代码和效果图在 GitHub 上可以看到。