在我写的上篇文章中，介绍了美颜滤镜的实现原理，已经能够体会到GPUImage 的强大。本文将要介绍的Faceu贴纸效果也是基于GPUImage实现的，demo我放在了GitHub上。

1.核心原理

Faceu贴纸效果其实就是在人脸上贴一些图片，同时这些图片是跟随着人脸的位置改变的。如果我们不强调贴图的位置，这就是一个简单的水印需求。

Faceu原理.png

根据人脸检测的结果动态调整水印贴纸的位置即可实现简单的Faceu效果。

2.水印

在GPUImage的官方demo中就已经有文字水印的实现：

            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在维基百科上有介绍。下图是整个加水印的过程：

水印.png

3.人脸检测

利用CIDetector即可简单的实现人脸检测，首先是CIDetector的初始化:

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

然后通过将摄像头数据CMSampleBufferRef转化为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数组里的每个元素都是CIFaceFeature对象，根据它就能计算出人脸的具体位置，从而调整中水印图像的位置，达到图像跟随人脸动的效果。

        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来更新水印图像的位置：

    __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? 这个有待进一步研究，如果有这方面经验的朋友也欢迎在评论区留言，互相交流学习。

23条评论（按时间正序· 按时间倒序· 按喜欢排序）添加新评论

嗷大喵

2 楼 · 2016.05.22 22:42

就是厉害这么快就出demo了

喜欢(0) 回复

493741bb515b

3 楼 · 2016.05.22 22:58

我现在就在做录像上面添加动态贴纸，我就是通过gif实现的，通过传一个URL获取CAKeyframeAnimation。将这个animation添加到layer上面，最后添加到View上实现的
。不知道这样是否合理

落影loyinglin

4 楼 · 2016.05.22 23:43

赞，学习了。

loook

5 楼 · 2016.05.24 13:56

关于动态贴纸，我参考了FLAnimatedImage的做法，获取GIF的每一张图片，然后根据视频帧的间隔确定当前需要贴哪一张，再贴到指定位置即可

琨君： @loook 感谢分享，我再试试

回复 2016.05.24 13:58

dulixiaonvzi

6 楼 · 2016.06.01 16:59

我是做的那个动态水印，这个会不会占用内存比较多，以及导致CPU的占用率比较高呢

userName

7 楼 · 2016.06.02 16:47

人脸识别我一直使用AVCaptureMetadataOutput

从10到1

8 楼 · 2016.06.15 20:47

可是应该还有抖动的问题吧？

lin知易

9 楼 · 2016.07.01 11:57

你好, 能请教一下, 为什么给单图片加水印没有成功么

代码如下

GPUImagePicture *pic = [[GPUImagePicture alloc] initWithCGImage:image];
GPUImageAlphaBlendFilter *blendFilter = [[GPUImageAlphaBlendFilter alloc] init];
blendFilter.mix = 1.0;

GPUImageBrightnessFilter *brightnessFilter = [[GPUImageBrightnessFilter alloc] init];
brightnessFilter.brightness = 0.0f;
[pic addTarget:brightnessFilter];
[brightnessFilter addTarget:blendFilter];
[self.UIElement addTarget:blendFilter];

[blendFilter useNextFrameForImageCapture];
[pic processImage];

CGImageRef img = [blendFilter newCGImageFromCurrentlyProcessedOutput];

newCGImageFromCurrentlyProcessedOutput 的结果都是 nil

lin知易： @lin知易 self.UIElement 的代码

CGSize size = self.view.bounds.size;
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
label.text = @"我是水印";
label.font = [UIFont systemFontOfSize:30];
label.textColor = [UIColor redColor];
[label sizeToFit];

UIView *subView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, size.width, size.height)];
subView.backgroundColor = [UIColor clearColor];
[subView addSubview:label];

GPUImageUIElement *uielement = [[GPUImageUIElement alloc] initWithView:subView];

回复 2016.07.01 11:58

琨君： @lin知易你没有调用 GPUImageUIElement的update方法

回复 2016.07.01 12:24

lin知易： @琨君感谢回复
加上了这段代码, 就有水印了
__weak typeof (self) weakSelf = self;
[brightnessFilter setFrameProcessingCompletionBlock:^(GPUImageOutput *output, CMTime time) {
__strong typeof (self) strongSelf = weakSelf;
[strongSelf.UIElement update];
}];

回复 2016.07.01 13:41

10 楼 · 2016.07.01 14:04

还想请教一个问题
我本来是使用 newCGImageByFilteringCGImage 直接进行滤镜处理的,
传入 CGImageRef 返回 CGImageRef

加水印的话, 有没有办法简化一下呢？？
本来的代码
CGImageRef cgimage = [filter newCGImageByFilteringCGImage:image];
return cgimage;

现在

GPUImagePicture *pic = [[GPUImagePicture alloc] initWithCGImage:image];
GPUImageAlphaBlendFilter *blendFilter = [[GPUImageAlphaBlendFilter alloc] init];
blendFilter.mix = 1.0;

GPUImageBrightnessFilter *brightnessFilter = [[GPUImageBrightnessFilter alloc] init];
brightnessFilter.brightness = 0.0f;
[pic addTarget:brightnessFilter];
[brightnessFilter addTarget:blendFilter];
[self.UIElement addTarget:blendFilter];

[blendFilter useNextFrameForImageCapture];
[pic processImage];

__weak typeof (self) weakSelf = self;
[brightnessFilter setFrameProcessingCompletionBlock:^(GPUImageOutput *output, CMTime time) {
__strong typeof (self) strongSelf = weakSelf;
[strongSelf.UIElement update];
}];

CGImageRef img = [blendFilter newCGImageFromCurrentlyProcessedOutput];
if (!img) {
NSLog(@"..........");
return nil;
}

return img;

想问下能不能简化话, 我尝试简化了下, 发现 img 都会为 nil

lin知易： @lin知易而且这样. 内存会一致增长, img 在 return 之后会进行释放, 也没有起作用

回复 2016.07.01 14:05

琨君： @lin知易直接在最后加上[self.UIElement update];就可以了

回复 2016.07.01 14:19

琨君： @lin知易 CGSize size = self.view.bounds.size;
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
label.text = @"我是水印";
label.font = [UIFont systemFontOfSize:30];
label.textColor = [UIColor redColor];
[label sizeToFit];

UIView *subView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, size.width, size.height)];
subView.backgroundColor = [UIColor clearColor];
[subView addSubview:label];

GPUImageUIElement *uielement = [[GPUImageUIElement alloc] initWithView:subView];
self.UIElement = uielement;

GPUImagePicture *pic = [[GPUImagePicture alloc] initWithImage:[UIImage imageNamed:@"test.png"]];
GPUImageAlphaBlendFilter *blendFilter = [[GPUImageAlphaBlendFilter alloc] init];
blendFilter.mix = 1.0;

GPUImageBrightnessFilter *brightnessFilter = [[GPUImageBrightnessFilter alloc] init];
brightnessFilter.brightness = 0.0f;
[pic addTarget:brightnessFilter];
[brightnessFilter addTarget:blendFilter];
[self.UIElement addTarget:blendFilter];

[blendFilter useNextFrameForImageCapture];
[pic processImage];
[self.UIElement update];

回复 2016.07.01 14:20

Tosaka乐园

11 楼 · 2016.07.05 09:45

想请教一下，作者有没那种跟随着表情一起动的动态贴图的做法思路？就是脸部有一个表情然后嘴巴动的时候贴图也会跟着动，就好像皮肤一样那个效果?

在直播应用中添加Faceu效果

1.核心原理

2.水印

3.人脸检测

4.延伸

你可能感兴趣的:(iOS)

在直播应用中添加Faceu效果

1.核心原理

2.水印

3.人脸检测

4.延伸

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

喜欢的用户

你可能感兴趣的:(iOS)