在我寫的上篇文章 中，介紹了美顏濾鏡的實現(xiàn)原理，已經(jīng)能夠體會到[GPUImage](https://github.com/BradLarson/GPUImage) 的強大。本文將要介紹的Faceu貼紙效果也是基于GPUImage實現(xiàn)的，demo我放在了[GitHub](https://github.com/Guikunzhi/YLFaceuDemo)上。

1.核心原理

   Faceu貼紙效果其實就是在人臉上貼一些圖片，同時這些圖片是跟隨著人臉的位置改變的。如果我們不強調(diào)貼圖的位置，這就是一個簡單的水印需求。

Faceu原理.png

   根據(jù)人臉檢測的結(jié)果動態(tài)調(diào)整水印貼紙的位置即可實現(xiàn)簡單的Faceu效果。

2.水印

   在GPUImage的官方demo中就已經(jīng)有文字水印的實現(xiàn)：

            GPUImageFilter *filter = [[GPUImageFilter alloc] init];
            [self.videoCamera addTarget:filter];
            GPUImageAlphaBlendFilter *blendFilter = [[GPUImageAlphaBlendFilter alloc] init];
            blendFilter.mix = 1.0;
            
            NSDate *startTime = [NSDate date];
            
            UIView *temp = [[UIView alloc] initWithFrame:self.view.frame];
            UILabel *timeLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0, 240.0f, 40.0f)];
            timeLabel.font = [UIFont systemFontOfSize:17.0f];
            timeLabel.text = @"Time: 0.0 s";
            timeLabel.textAlignment = UITextAlignmentCenter;
            timeLabel.backgroundColor = [UIColor clearColor];
            timeLabel.textColor = [UIColor whiteColor];
            [temp addSubview:timeLabel];

            uiElementInput = [[GPUImageUIElement alloc] initWithView:temp];
            [filter addTarget:blendFilter];
            [uiElementInput addTarget:blendFilter];
            
            [blendFilter addTarget:filterView];

            __unsafe_unretained GPUImageUIElement *weakUIElementInput = uiElementInput;
            
            [filter setFrameProcessingCompletionBlock:^(GPUImageOutput * filter, CMTime frameTime){
                timeLabel.text = [NSString stringWithFormat:@"Time: %f s", -[startTime timeIntervalSinceNow]];
                [weakUIElementInput update];
            }];

   要理解它的實現(xiàn)原理，需要搞懂GPUImageUIElement和GPUImageAlphaBlendFilter。GPUImageUIElement的作用是把一個視圖的layer通過CALayer的renderInContext:方法把layer轉(zhuǎn)化為image，然后作為OpenGL的紋理傳給GPUImageAlphaBlendFilter。而GPUImageAlphaBlendFilter則是一個兩輸入的blend filter, 它的第一個輸入是攝像頭數(shù)據(jù)，第二個輸入則是剛剛提到的GPUImageUIElement的數(shù)據(jù)，GPUImageAlphaBlendFilter將這兩個輸入做alpha blend，可以簡單的理解為將第二個輸入疊加到第一個的上面，更多關(guān)于[alpha blend](https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending)在維基百科上有介紹。下圖是整個加水印的過程：

水印.png

3.人臉檢測

   利用CIDetector即可簡單的實現(xiàn)人臉檢測，首先是CIDetector的初始化:

        NSDictionary *detectorOptions = [[NSDictionary alloc] initWithObjectsAndKeys:CIDetectorAccuracyLow, CIDetectorAccuracy, nil];
        _faceDetector = [CIDetector detectorOfType:CIDetectorTypeFace context:nil options:detectorOptions];

   然后通過將攝像頭數(shù)據(jù)CMSampleBufferRef轉(zhuǎn)化為CIImage，對CIImage用CIDetector進行人臉檢測:

    CVPixelBufferRef pixelBuffer = CMSampleBufferGetImageBuffer(sampleBuffer);
    CFDictionaryRef attachments = CMCopyDictionaryOfAttachments(kCFAllocatorDefault, sampleBuffer, kCMAttachmentMode_ShouldPropagate);
    CIImage *convertedImage = [[CIImage alloc] initWithCVPixelBuffer:pixelBuffer options:(__bridge NSDictionary *)attachments];
    NSArray *features = [self.faceDetector featuresInImage:convertedImage options:imageOptions];

   上面得到的features數(shù)組里的每個元素都是CIFaceFeature對象，根據(jù)它就能計算出人臉的具體位置，從而調(diào)整中水印圖像的位置，達到圖像跟隨人臉動的效果。

        for ( CIFaceFeature *faceFeature in featureArray) {
            // find the correct position for the square layer within the previewLayer
            // the feature box originates in the bottom left of the video frame.
            // (Bottom right if mirroring is turned on)
            //Update face bounds for iOS Coordinate System
            CGRect faceRect = [faceFeature bounds];
            
            // flip preview width and height
            CGFloat temp = faceRect.size.width;
            faceRect.size.width = faceRect.size.height;
            faceRect.size.height = temp;
            temp = faceRect.origin.x;
            faceRect.origin.x = faceRect.origin.y;
            faceRect.origin.y = temp;
            // scale coordinates so they fit in the preview box, which may be scaled
            CGFloat widthScaleBy = previewBox.size.width / clap.size.height;
            CGFloat heightScaleBy = previewBox.size.height / clap.size.width;
            faceRect.size.width *= widthScaleBy;
            faceRect.size.height *= heightScaleBy;
            faceRect.origin.x *= widthScaleBy;
            faceRect.origin.y *= heightScaleBy;
            
            faceRect = CGRectOffset(faceRect, previewBox.origin.x, previewBox.origin.y);
            
            //mirror
            CGRect rect = CGRectMake(previewBox.size.width - faceRect.origin.x - faceRect.size.width, faceRect.origin.y, faceRect.size.width, faceRect.size.height);
            if (fabs(rect.origin.x - self.faceBounds.origin.x) > 5.0) {
                self.faceBounds = rect;
            }
        }

   上面則是計算人臉位置faceBounds的方法，我們再根據(jù)faceBounds來更新水印圖像的位置：

    __weak typeof (self) weakSelf = self;
    [filter setFrameProcessingCompletionBlock:^(GPUImageOutput *output, CMTime time) {
        __strong typeof (self) strongSelf = weakSelf;
        // update capImageView's frame
        CGRect rect = strongSelf.faceBounds;
        CGSize size = strongSelf.capImageView.frame.size;
        strongSelf.capImageView.frame = CGRectMake(rect.origin.x +  (rect.size.width - size.width)/2, rect.origin.y - size.height, size.width, size.height);
        [strongSelf.element update];
    }];

4.延伸

• 問題1：上面用的人臉檢測是基于CIDetector的，實際實驗發(fā)現(xiàn)，當(dāng)人臉在攝像頭中捕獲不全時，有可能檢測不出人臉，也就沒法更新水印圖像的位置。因此，更加精準(zhǔn)、快速、細(xì)致的人臉檢測是很有必要的，后面我會嘗試使用一些其他的人臉檢測方法。
• 問題2：上面的Faceu貼紙效果是靜態(tài)圖像的貼紙效果，如果要做動態(tài)效果的Faceu貼紙該怎么處理呢, Gif? CADisplayLink? 這個有待進一步研究，如果有這方面經(jīng)驗的朋友也歡迎在評論區(qū)留言，互相交流學(xué)習(xí)。