在我寫的上篇文章中，介紹了美顏濾鏡的實現原理，已經能夠體會到 GPUImage 的強大。本文將要介紹的Faceu貼紙效果也是基於GPUImage實現的，demo我放在了GitHub上。
1.核心原理
Faceu貼紙效果其實就是在人臉上貼一些圖片，同時這些圖片是跟隨著人臉的位置改變的。如果我們不強調貼圖的位置，這就是一個簡單的水印需求。
根據人臉檢測的結果動態調整水印貼紙的位置即可實現簡單的Faceu效果。
2.水印
在GPUImage的官方demo中就已經有文字水印的實現：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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]; }]; |
要理解它的實現原理，需要搞懂GPUImageUIElement和GPUImageAlphaBlendFilter。GPUImageUIElement的作用是把一個檢視的layer通過CALayer的renderInContext:方法把layer轉化為image，然後作為OpenGL的紋理傳給GPUImageAlphaBlendFilter。而GPUImageAlphaBlendFilter則是一個兩輸入的blend filter, 它的第一個輸入是攝像頭資料，第二個輸入則是剛剛提到的GPUImageUIElement的資料，GPUImageAlphaBlendFilter將這兩個輸入做alpha blend，可以簡單的理解為將第二個輸入疊加到第一個的上面，更多關於alpha blend在維基百科上有介紹。下圖是整個加水印的過程：
3.人臉檢測
利用CIDetector即可簡單的實現人臉檢測，首先是CIDetector的初始化:
|
1 2 3 |
NSDictionary *detectorOptions = [[NSDictionary alloc] initWithObjectsAndKeys:CIDetectorAccuracyLow, CIDetectorAccuracy, nil]; _faceDetector = [CIDetector detectorOfType:CIDetectorTypeFace context:nil options:detectorOptions]; |
然後通過將攝像頭資料CMSampleBufferRef轉化為CIImage，對CIImage用CIDetector進行人臉檢測:
|
1 2 3 4 |
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陣列裡的每個元素都是CIFaceFeature物件，根據它就能計算出人臉的具體位置，從而調整中水印影像的位置，達到影像跟隨人臉動的效果。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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的方法，我們再根據faceBounds來更新水印影像的位置：
|
1 2 3 4 5 6 7 8 9 |
__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的，實際實驗發現，當人臉在攝像頭中捕獲不全時，有可能檢測不出人臉，也就沒法更新水印影像的位置。因此，更加精準、快速、細緻的人臉檢測是很有必要的，後面我會嘗試使用一些其他的人臉檢測方法。
- 問題2：上面的Faceu貼紙效果是靜態影像的貼紙效果，如果要做動態效果的Faceu貼紙該怎麼處理呢, Gif? CADisplayLink? 這個有待進一步研究，如果有這方面經驗的朋友也歡迎在評論區留言，互相交流學習。
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
