Tate Blog

iOS Developer

0%

iOS直播技术学习笔记-美颜滤镜效果（三）

Posted on In

GPUImage的介绍

  • GPUImage 是一个开源的基于GPU的图片或视频的处理框架，其本身内置了多达120多种常见的滤镜效果
  • GPUImage是利用GPU，使在图片和视频上应用不同的效果和滤镜变得非常的容易，同时它还拥有出色的性能，并且它的性能要比苹果内置的相关APIs出色

高斯模糊(毛玻璃)效果

  • 在iOS总实现毛玻璃效果方式有很多
    • UIToolBar本身有毛玻璃效果
    • iOS8之后UIVisualEffectView直接创建毛玻璃View
    • 系统CoreImage框架中直接修改图片
    • GPUImage框架给图片添加一层滤镜
  • 实现思路
    • 获取要修改成毛玻璃的图片
    • 给图片添加滤镜
    • 生成新的图片
  • 实现代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
fileprivate func generateBlurImage(_ sourceImage : UIImage) -> UIImage {
    // 1.创建用于处理单张图片(类似于美图秀秀中打开相册中的图片进行处理)
    let processView = GPUImagePicture(image: sourceImage)

    // 2.创建滤镜
    let blurFilter = GPUImageGaussianBlurFilter()
    // 纹理大小
    blurFilter.texelSpacingMultiplier = 2.0
    blurFilter.blurRadiusInPixels = 5.0
    processView?.addTarget(blurFilter)

    // 3.处理图像
    blurFilter.useNextFrameForImageCapture()
    processView?.processImage()

    // 4.获取最新的图像
    return blurFilter.imageFromCurrentFramebuffer()
}

其他滤镜效果

为多个target添加依赖库

  • 单个target
1
2
3
4
5
6
platform :ios, '8.0'
use_frameworks!
target 'targetName' do
    pod 'GPUImage'
end

  • 多个target依赖相同的库(Ruby语法)
1
2
3
4
5
6
7
8
9
10
11
platform :ios, '9.0'
use_frameworks!

targetsArray = ['01-GPUImage毛玻璃', '02-GPUImage其他滤镜']

targetsArray.each do |t|
    target t do
        pod 'GPUImage'
    end
end

  • 不同target依赖不同的库
1
2
3
4
5
6
7
8
9
10
11
platform :ios, '8.0'
use_frameworks!
target 'targetName1' do
    pod 'Alamofire'
end

target 'targetName2' do
    pod 'Alamofire'
    pod 'Kingfisher'
end

  • 常见滤镜
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
#pragma mark - 调整颜色 Handle Color

    #import "GPUImageBrightnessFilter.h"                //亮度
    #import "GPUImageExposureFilter.h"                  //曝光
    #import "GPUImageContrastFilter.h"                  //对比度
    #import "GPUImageSaturationFilter.h"                //饱和度
    #import "GPUImageGammaFilter.h"                     //伽马线
    #import "GPUImageColorInvertFilter.h"               //反色
    #import "GPUImageSepiaFilter.h"                     //褐色（怀旧）
    #import "GPUImageLevelsFilter.h"                    //色阶
    #import "GPUImageGrayscaleFilter.h"                 //灰度
    #import "GPUImageHistogramFilter.h"                 //色彩直方图，显示在图片上
    #import "GPUImageHistogramGenerator.h"              //色彩直方图
    #import "GPUImageRGBFilter.h"                       //RGB
    #import "GPUImageToneCurveFilter.h"                 //色调曲线
    #import "GPUImageMonochromeFilter.h"                //单色
    #import "GPUImageOpacityFilter.h"                   //不透明度
    #import "GPUImageHighlightShadowFilter.h"           //提亮阴影
    #import "GPUImageFalseColorFilter.h"                //色彩替换（替换亮部和暗部色彩）
    #import "GPUImageHueFilter.h"                       //色度
    #import "GPUImageChromaKeyFilter.h"                 //色度键
    #import "GPUImageWhiteBalanceFilter.h"              //白平横
    #import "GPUImageAverageColor.h"                    //像素平均色值
    #import "GPUImageSolidColorGenerator.h"             //纯色
    #import "GPUImageLuminosity.h"                      //亮度平均
    #import "GPUImageAverageLuminanceThresholdFilter.h" //像素色值亮度平均，图像黑白（有类似漫画效果）

    #import "GPUImageLookupFilter.h"                    //lookup 色彩调整
    #import "GPUImageAmatorkaFilter.h"                  //Amatorka lookup
    #import "GPUImageMissEtikateFilter.h"               //MissEtikate lookup
    #import "GPUImageSoftEleganceFilter.h"              //SoftElegance lookup

    #pragma mark - 图像处理 Handle Image

    #import "GPUImageCrosshairGenerator.h"              //十字
    #import "GPUImageLineGenerator.h"                   //线条

    #import "GPUImageTransformFilter.h"                 //形状变化
    #import "GPUImageCropFilter.h"                      //剪裁
    #import "GPUImageSharpenFilter.h"                   //锐化
    #import "GPUImageUnsharpMaskFilter.h"               //反遮罩锐化

    #import "GPUImageFastBlurFilter.h"                  //模糊
    #import "GPUImageGaussianBlurFilter.h"              //高斯模糊
    #import "GPUImageGaussianSelectiveBlurFilter.h"     //高斯模糊，选择部分清晰
    #import "GPUImageBoxBlurFilter.h"                   //盒状模糊
    #import "GPUImageTiltShiftFilter.h"                 //条纹模糊，中间清晰，上下两端模糊
    #import "GPUImageMedianFilter.h"                    //中间值，有种稍微模糊边缘的效果
    #import "GPUImageBilateralFilter.h"                 //双边模糊
    #import "GPUImageErosionFilter.h"                   //侵蚀边缘模糊，变黑白
    #import "GPUImageRGBErosionFilter.h"                //RGB侵蚀边缘模糊，有色彩
    #import "GPUImageDilationFilter.h"                  //扩展边缘模糊，变黑白
    #import "GPUImageRGBDilationFilter.h"               //RGB扩展边缘模糊，有色彩
    #import "GPUImageOpeningFilter.h"                   //黑白色调模糊
    #import "GPUImageRGBOpeningFilter.h"                //彩色模糊
    #import "GPUImageClosingFilter.h"                   //黑白色调模糊，暗色会被提亮
    #import "GPUImageRGBClosingFilter.h"                //彩色模糊，暗色会被提亮
    #import "GPUImageLanczosResamplingFilter.h"         //Lanczos重取样，模糊效果
    #import "GPUImageNonMaximumSuppressionFilter.h"     //非最大抑制，只显示亮度最高的像素，其他为黑
    #import "GPUImageThresholdedNonMaximumSuppressionFilter.h" //与上相比，像素丢失更多

    #import "GPUImageSobelEdgeDetectionFilter.h"        //Sobel边缘检测算法(白边，黑内容，有点漫画的反色效果)
    #import "GPUImageCannyEdgeDetectionFilter.h"        //Canny边缘检测算法（比上更强烈的黑白对比度）
    #import "GPUImageThresholdEdgeDetectionFilter.h"    //阈值边缘检测（效果与上差别不大）
    #import "GPUImagePrewittEdgeDetectionFilter.h"      //普瑞维特(Prewitt)边缘检测(效果与Sobel差不多，貌似更平滑)
    #import "GPUImageXYDerivativeFilter.h"              //XYDerivative边缘检测，画面以蓝色为主，绿色为边缘，带彩色
    #import "GPUImageHarrisCornerDetectionFilter.h"     //Harris角点检测，会有绿色小十字显示在图片角点处
    #import "GPUImageNobleCornerDetectionFilter.h"      //Noble角点检测，检测点更多
    #import "GPUImageShiTomasiFeatureDetectionFilter.h" //ShiTomasi角点检测，与上差别不大
    #import "GPUImageMotionDetector.h"                  //动作检测
    #import "GPUImageHoughTransformLineDetector.h"      //线条检测
    #import "GPUImageParallelCoordinateLineTransformFilter.h" //平行线检测

    #import "GPUImageLocalBinaryPatternFilter.h"        //图像黑白化，并有大量噪点

    #import "GPUImageLowPassFilter.h"                   //用于图像加亮
    #import "GPUImageHighPassFilter.h"                  //图像低于某值时显示为黑

    #pragma mark - 视觉效果 Visual Effect

    #import "GPUImageSketchFilter.h"                    //素描
    #import "GPUImageThresholdSketchFilter.h"           //阀值素描，形成有噪点的素描
    #import "GPUImageToonFilter.h"                      //卡通效果（黑色粗线描边）
    #import "GPUImageSmoothToonFilter.h"                //相比上面的效果更细腻，上面是粗旷的画风
    #import "GPUImageKuwaharaFilter.h"                  //桑原(Kuwahara)滤波,水粉画的模糊效果；处理时间比较长，慎用

    #import "GPUImageMosaicFilter.h"                    //黑白马赛克
    #import "GPUImagePixellateFilter.h"                 //像素化
    #import "GPUImagePolarPixellateFilter.h"            //同心圆像素化
    #import "GPUImageCrosshatchFilter.h"                //交叉线阴影，形成黑白网状画面
    #import "GPUImageColorPackingFilter.h"              //色彩丢失，模糊（类似监控摄像效果）

    #import "GPUImageVignetteFilter.h"                  //晕影，形成黑色圆形边缘，突出中间图像的效果
    #import "GPUImageSwirlFilter.h"                     //漩涡，中间形成卷曲的画面
    #import "GPUImageBulgeDistortionFilter.h"           //凸起失真，鱼眼效果
    #import "GPUImagePinchDistortionFilter.h"           //收缩失真，凹面镜
    #import "GPUImageStretchDistortionFilter.h"         //伸展失真，哈哈镜
    #import "GPUImageGlassSphereFilter.h"               //水晶球效果
    #import "GPUImageSphereRefractionFilter.h"          //球形折射，图形倒立

    #import "GPUImagePosterizeFilter.h"                 //色调分离，形成噪点效果
    #import "GPUImageCGAColorspaceFilter.h"             //CGA色彩滤镜，形成黑、浅蓝、紫色块的画面
    #import "GPUImagePerlinNoiseFilter.h"               //柏林噪点，花边噪点
    #import "GPUImage3x3ConvolutionFilter.h"            //3x3卷积，高亮大色块变黑，加亮边缘、线条等
    #import "GPUImageEmbossFilter.h"                    //浮雕效果，带有点3d的感觉
    #import "GPUImagePolkaDotFilter.h"                  //像素圆点花样
    #import "GPUImageHalftoneFilter.h"                  //点染,图像黑白化，由黑点构成原图的大致图形

    #pragma mark - 混合模式 Blend

    #import "GPUImageMultiplyBlendFilter.h"             //通常用于创建阴影和深度效果
    #import "GPUImageNormalBlendFilter.h"               //正常
    #import "GPUImageAlphaBlendFilter.h"                //透明混合,通常用于在背景上应用前景的透明度
    #import "GPUImageDissolveBlendFilter.h"             //溶解
    #import "GPUImageOverlayBlendFilter.h"              //叠加,通常用于创建阴影效果
    #import "GPUImageDarkenBlendFilter.h"               //加深混合,通常用于重叠类型
    #import "GPUImageLightenBlendFilter.h"              //减淡混合,通常用于重叠类型
    #import "GPUImageSourceOverBlendFilter.h"           //源混合
    #import "GPUImageColorBurnBlendFilter.h"            //色彩加深混合
    #import "GPUImageColorDodgeBlendFilter.h"           //色彩减淡混合
    #import "GPUImageScreenBlendFilter.h"               //屏幕包裹,通常用于创建亮点和镜头眩光
    #import "GPUImageExclusionBlendFilter.h"            //排除混合
    #import "GPUImageDifferenceBlendFilter.h"           //差异混合,通常用于创建更多变动的颜色
    #import "GPUImageSubtractBlendFilter.h"             //差值混合,通常用于创建两个图像之间的动画变暗模糊效果
    #import "GPUImageHardLightBlendFilter.h"            //强光混合,通常用于创建阴影效果
    #import "GPUImageSoftLightBlendFilter.h"            //柔光混合
    #import "GPUImageChromaKeyBlendFilter.h"            //色度键混合
    #import "GPUImageMaskFilter.h"                      //遮罩混合
    #import "GPUImageHazeFilter.h"                      //朦胧加暗
    #import "GPUImageLuminanceThresholdFilter.h"        //亮度阈
    #import "GPUImageAdaptiveThresholdFilter.h"         //自适应阈值
    #import "GPUImageAddBlendFilter.h"                  //通常用于创建两个图像之间的动画变亮模糊效果
    #import "GPUImageDivideBlendFilter.h"               //通常用于创建两个图像之间的动画变暗模糊效果

GPUImage美颜相机

  • GPUImageStillCamera用于拍摄当前手机的画面, 但是通常不会用实时视频的录制(使用另外一个), 主要用户拍摄某一个画面, 并且保存(显示)图片
  • GPUImageStillCamera->GPUImageFilter->GPUImageView 这样,摄像机转到滤镜再转到view上显示出来.
1
2
3
4
5
6
7
//可以理解为设备
GPUImageStillCamera* imageCamera;
//filter滤镜
GPUImageFilter* filter;
//显示出来的view
GPUImageView* iv;

  • sessionPreset参数设置

img

img

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
31
32
33
34
35
36
37
38
39
40
class ViewController: UIViewController {

    @IBOutlet var imageView : UIImageView!
    fileprivate var stillCamera : GPUImageStillCamera?
    fileprivate var filter : GPUImageBrightnessFilter!

    override func viewDidLoad() {
        super.viewDidLoad()

        // 1.创建相机
        stillCamera = GPUImageStillCamera(sessionPreset: AVCaptureSessionPreset640x480, cameraPosition: .front)
        stillCamera?.outputImageOrientation = .portrait

        // 2.创建滤镜
        filter = GPUImageBrightnessFilter()
        filter.brightness = 0.3
        stillCamera?.addTarget(filter)

        // 3.创建显示实时画面的View
        let showView = GPUImageView(frame: view.bounds)
        view.insertSubview(showView, at: 0)
        filter.addTarget(showView)
    }

    @IBAction func rotateCamera() {
        stillCamera?.startCapture()
    }

    @IBAction func start() {
        stillCamera?.rotateCamera()
    }

    @IBAction func stop() {
        stillCamera?.capturePhotoAsImageProcessedUp(toFilter: filter, withCompletionHandler: { (image :  UIImage?, error : Error?) in
            UIImageWriteToSavedPhotosAlbum(image!, nil, nil, nil)
            self.stillCamera?.stopCapture()
        })
    }
}