iOS美颜实现

Share 
这篇文章主要是介绍iOS实现美颜的原理，如果想简单点实现美颜功能可以直接导入LFLiveKit这个库

我在以前的文章里介绍过如何使用LFLiveKit进行美颜设置，导入这个库后只需要一行代码就可以实现。

http://www.saberismywife.com/2016/10/17/LFLiveKit的简单用法/

但是这篇文章主要是介绍它是如何实现的

首先LFLiveKit实现美颜的功能是基于GPUImage这个第三方库的，所以咱们也先导入这个库。

GUPImage是一个开源的基于GPU的图片或视频的处理框架，其本身内置了多达120多种常见的滤镜效果。有了它，添加实时的滤镜只需要简单地添加几行代码

GUPImage处理美颜过程

首先是用基于AVFoundation的GPUImageVideoCamera来采集视频，从而获得视频的每一帧动画，进而对每一帧动画进行像素点的坐标和颜色变化。

GUPImage这个库十分庞大，大家谁对照片处理或者视频处理可以仔细研究一下。

当完成像素点的优化后，美颜过程基本就完成了。剩下的就是对其进行编码处理以及推流了。这里的推流还是上面那一篇博客中说的RTMP推流。

在编码和推流的同时，通过底层的OpenGL渲染生成GUPImageView

GUPImage处理画面原理

GPUImage采用链式方式来处理画面,通过addTarget:方法为链条添加每个环节的对象，处理完一个target,就会把上一个环节处理好的图像数据传递下一个target去处理，称为GPUImage处理链

一般的target可分为两类

  • 中间环节的target, 一般是各种filter, 是GPUImageFilter或者是子类
  • 最终环节的target, GPUImageView：用于显示到屏幕上, 或者GPUImageMovieWriter：写成视频文件

GPUImage处理主要分为3个环节

  • source -> filter -> final target

  • GPUImaged的Source:都继承GPUImageOutput的子类，作为GPUImage的数据源,就好比外界的光线，作为眼睛的输出源

    PUImageVideoCamera：用于实时拍摄视频
    GPUImageStillCamera：用于实时拍摄照片
    GPUImagePicture：用于处理已经拍摄好的图片，比如png,jpg图片
    GPUImageMovie：用于处理已经拍摄好的视频,比如mp4文件

  • GPUImage的filter:GPUimageFilter类或者子类，这个类继承自GPUImageOutput,并且遵守GPUImageInput协议，这样既能流进，又能流出，就好比我们的墨镜，光线通过墨镜的处理，最终进入我们眼睛

  • GPUImage的final target:GPUImageView,GPUImageMovieWriter就好比我们眼睛，最终输入目标

美颜原理

磨皮(GPUImageBilateralFilter)

磨皮的本质实际上是模糊。而在图像处理领域，模糊就是将像素点的取值与周边的像素点取值相关联。而我们常见的高斯模糊，它的像素点取值则是由周边像素点求加权平均所得，而权重系数则是像素间的距离的高斯函数，大致关系是距离越小、权重系数越大

如果单单使用高斯模糊来磨皮，得到的效果是不尽人意的。原因在于，高斯模糊只考虑了像素间的距离关系，没有考虑到像素值本身之间的差异。举个例子来讲，头发与人脸分界处（颜色差异很大，黑色与人皮肤的颜色），如果采用高斯模糊则这个边缘也会模糊掉，这显然不是我们希望看到的。而双边滤镜（Bilateral Filter）则考虑到了颜色的差异，它的像素点取值也是周边像素点的加权平均，而且权重也是高斯函数。不同的是，这个权重不仅与像素间距离有关，还与像素值本身的差异有关，具体讲是，像素值差异越小，权重越大，也是这个特性让它具有了保持边缘的特性，因此它是一个很好的磨皮工具。

美白(GPUImageBrightnessFilter)

本质上就是提高亮度

使用GPUImage

1.将GPUImage导入
2.创建视频源GPUImageVideoCamera
3.创建最终目的源：GPUImageView
4.创建滤镜组(GPUImageFilterGroup)，需要组合亮度(GPUImageBrightnessFilter)和双边滤波(GPUImageBilateralFilter)这两个滤镜达到美颜效果.
5.设置滤镜组链
6.设置GPUImage处理链，从数据源 => 滤镜 => 最终界面效果
7.开始采集视频

创建视频源

1
2
3
4
5
// SessionPreset:屏幕分辨率，AVCaptureSessionPresetHigh会自适应高分辨率
// cameraPosition:摄像头方向
GPUImageVideoCamera *videoCamera = [[GPUImageVideoCamera alloc] initWithSessionPreset:AVCaptureSessionPresetHigh cameraPosition:AVCaptureDevicePositionFront];
videoCamera.outputImageOrientation = UIInterfaceOrientationPortrait;
_videoCamera = videoCamera;

创建最终预览View

1
2
GPUImageView *captureVideoPreview = [[GPUImageView alloc] initWithFrame:self.view.bounds];
[self.view insertSubview:captureVideoPreview atIndex:0];

创建滤镜：磨皮，美白，组合滤镜

1
2
3
4
5
6
7
8
9
10
11
GPUImageFilterGroup *groupFilter = [[GPUImageFilterGroup alloc] init];

// 磨皮滤镜
GPUImageBilateralFilter *bilateralFilter = [[GPUImageBilateralFilter alloc] init];
[groupFilter addTarget:bilateralFilter];
_bilateralFilter = bilateralFilter;

// 美白滤镜
GPUImageBrightnessFilter *brightnessFilter = [[GPUImageBrightnessFilter alloc] init];
[groupFilter addTarget:brightnessFilter];
_brightnessFilter = brightnessFilter;

设置滤镜组链

1
2
3
[bilateralFilter addTarget:brightnessFilter];
[groupFilter setInitialFilters:@[bilateralFilter]];
groupFilter.terminalFilter = brightnessFilter;

设置GPUImage响应链

1
2
[videoCamera addTarget:groupFilter];
[groupFilter addTarget:captureVideoPreview];

开始采集视频

1
[videoCamera startCameraCapture];

设置按钮

1
2
3
4
5
6
7
8
9
- (IBAction)brightnessFilter:(UISlider *)sender {
    _brightnessFilter.brightness = sender.value;
}

- (IBAction)bilateralFilter:(UISlider *)sender {
    // 值越小，磨皮效果越好
    CGFloat maxValue = 10;
    [_bilateralFilter setDistanceNormalizationFactor:(maxValue - sender.value)];
}