iOS-GPUImage应用

最新推荐文章于 2025-06-14 11:21:33 发布

原创最新推荐文章于 2025-06-14 11:21:33 发布 · 967 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#GPUImage

技术类博客专栏收录该内容

47 篇文章

订阅专栏

本文详细介绍GPUImage框架的应用，包括图片滤镜效果实现、美颜相机搭建、视频滤镜处理及磨皮效果等，并提供实际代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

现在各大直播以及美颜相机等都用到了 GPUImage 框架，想研究的透彻，可以去看他的源码，然后去研究OpenGL ES，然后你发现看不懂OpenGL ES框架，那就对了，它是用C写的，想了解更多就先去看OpenGL，当然了，如果只是产品需求，其实我们只要了解他的用法就可以了，有时间和精力再去看它的底层实现。想了解更多可以看下落影loyinglin 的文章，写的挺好的。

一、下载GPUImage

到github上面去下载，然后倒入项目中。
通过CocoaPods下载 pod 'GPUImage'

二、简单应用

1.图片的一个滤镜效果

只有一个静态滤镜效果，以 GPUImageSepiaFilter（棕褐色滤镜）为例：

   UIImage * image = [UIImage imageNamed:@"333"];

   UIImageView *contentImage = [[UIImageView alloc] initWithFrame:self.view.frame];
   contentImage.contentMode = UIViewContentModeScaleAspectFill;
   [self.view addSubview:contentImage];

   GPUImagePictures *sourcePicture = [[GPUImagePicture alloc] initWithImage:image smoothlyScaleOutput:YES];

   GPUImageView *imageView = [[GPUImageView alloc] initWithFrame:contentImage.frame];
   [contentImage addSubview:imageView];

   GPUImageSepiaFilter *fitler = [[GPUImageSepiaFilter alloc] init];
   [sourcePicture addTarget:fitler];

   [sourcePicture processImage];
   [fitler useNextFrameForImageCapture];

   image = [f imageFromCurrentFramebuffer];

   contentImage.image = image;

这样我们就得到一张经过棕褐色滤镜的图片。

2.图片多个滤镜效果

图片添加多个滤镜效果可以使用 GPUImageFilterGroup 或者 GPUImageFilterPipeline ，我们以GPUImageSepiaFilter棕褐色滤镜和GPUImageBrightnessFilter光度强弱为例：

   UIImage * image = [UIImage imageNamed:@"333"];

    _imageView1 = [[UIImageView alloc] initWithFrame:self.view.frame];
    _contentImage.contentMode = UIViewContentModeScaleAspectFill;
    [self.view addSubview:_contentImage];

    _sourcePicture = [[GPUImagePicture alloc] initWithImage:image smoothlyScaleOutput:YES];

    GPUImageView *imageView = [[GPUImageView alloc] initWithFrame:_contentImage.frame];
    [_contentImage addSubview:imageView];

    _filterGroup = [[GPUImageFilterGroup alloc] init];
    [_sourcePicture addTarget:_filterGroup];

    _sepiaFilter = [[GPUImageSepiaFilter alloc] init];

    _brightnessFilter = [[GPUImageBrightnessFilter alloc] init];

    [self addGPUImageFilter:f];
    [self addGPUImageFilter:imageFilter];

    // 处理图片
    [_sourcePicture processImage];
    [_filterGroup useNextFrameForImageCapture];    
    _imageView1.image = [_filterGroup imageFromCurrentFramebuffer];

    [self addSlider];

- (void)addSlider
{
    UISlider *filterSettingsSlider = [[UISlider alloc] initWithFrame:CGRectMake(25, SCREEN_HEIGHT-50, SCREEN_WIDTH - 50, 40)];
    [filterSettingsSlider addTarget:self action:@selector(updateSliderValue:) forControlEvents:UIControlEventValueChanged];
    filterSettingsSlider.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin;
    filterSettingsSlider.minimumValue = -1.0;
    filterSettingsSlider.maximumValue = 1.0;
    filterSettingsSlider.value = 0.0;
    [self.view addSubview:filterSettingsSlider];
}

- (void)updateSliderValue:(UISlider *)slider
{
    [_brightnessFilter setBrightness:slider.value];

    [_sourcePicture processImage];   
    [_filterGroup useNextFrameForImageCapture];
    _imageView1.image = [_filterGroup imageFromCurrentFramebuffer];
}

// 添加 filter
/**
 原理：
 1. filterGroup(addFilter) 滤镜组添加每个滤镜
 2. 按添加顺序（可自行调整）前一个filter(addTarget) 添加后一个filter
 3. filterGroup.initialFilters = @[第一个filter]];
 4. filterGroup.terminalFilter = 最后一个filter;

 */
- (void)addGPUImageFilter:(GPUImageOutput<GPUImageInput> *)filter
{
    [_filterGroup addFilter:filter];

    GPUImageOutput<GPUImageInput> *newTerminalFilter = filter;

    NSInteger count = _filterGroup.filterCount;

    if (count == 1)
    {
        _filterGroup.initialFilters = @[newTerminalFilter];
        _filterGroup.terminalFilter = newTerminalFilter;

    } else
    {
        GPUImageOutput<GPUImageInput> *terminalFilter    = _filterGroup.terminalFilter;
        NSArray *initialFilters                          = _filterGroup.initialFilters;

        [terminalFilter addTarget:newTerminalFilter];

        _filterGroup.initialFilters = @[initialFilters[0]];
        _filterGroup.terminalFilter = newTerminalFilter;
    }
}

这样我们就能够在图片上面添加多种滤镜。

我们采用 GPUImageFilterPipeline 实现多个滤镜效果，和上面的大部分代码都一样，我们只展示不一样的部分：

   _pipeline = [[GPUImageFilterPipeline alloc] initWithOrderedFilters:@[_sepiaFilter,_brightnessFilter] input:_sourcePicture output:primaryView];

    [_sourcePicture processImage];

在slider方法里面只需要：

- (void)updateSliderValue:(UISlider *)slider
{
    [_brightnessFilter setBrightness:slider.value];   
    [_sourcePicture processImage];   
}

综上可以看出使用GPUImageFilterPipeline 要方便一些。

3.滤镜美颜相机

   // 1.创建相机
    self.stillCamera = [[GPUImageStillCamera alloc] initWithSessionPreset:AVCaptureSessionPreset1280x720 cameraPosition:AVCaptureDevicePositionFront];
    self.stillCamera.outputImageOrientation = UIInterfaceOrientationPortrait;
    // 镜像效果，前置摄像头需要，后置摄像头不出要，不然看到的是反的
    self.stillCamera.horizontallyMirrorFrontFacingCamera = YES;

    // 2.创建设置滤镜效果
    //self.filter = [[GPUImageSketchFilter alloc] init]; // 黑白滤镜效果
    self.filter = [[GPUImageGammaFilter alloc] init];
    self.outPut = self.filter;

    // 3.创建展示相机的视图
    self.filterView = [[GPUImageView alloc] initWithFrame:self.view.bounds];
    self.filterView.center = self.view.center;
    [self.view addSubview:self.filterView];

    // 4.这里一定要注意 一定要先加滤镜->在加视图->然后吧camera开始获取视频图像
    [self.stillCamera addTarget:self.filter];
    [self.filter addTarget:self.filterView];

    // 5.开始获取视频
    [self.stillCamera startCameraCapture];

4.滤镜视频

    videoCamera = [[GPUImageVideoCamera alloc] initWithSessionPreset:AVCaptureSessionPreset1280x720 cameraPosition:AVCaptureDevicePositionBack];
    videoCamera.outputImageOrientation = UIInterfaceOrientationPortrait;
    [videoCamera addAudioInputsAndOutputs];

    filter = [[GPUImageSaturationFilter alloc] init];

    filteredVideoView = [[GPUImageView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    //filteredVideoView.fillMode = kGPUImageFillModeStretch;//kGPUImageFillModePreserveAspectRatioAndFill;
    [videoCamera addTarget:filter];

    [filter addTarget:filteredVideoView];
    [videoCamera startCameraCapture];

使用相机和视频的时候注意访问权限的添加：

- 麦克风权限：Privacy - Microphone Usage Description  是否允许此App使用你的麦克风？
- 相机权限： Privacy - Camera Usage Description  是否允许此App使用你的相机？
- 添加到相册权限：Privacy - Photo Library Additions Usage Description  是否允许图片添加到相册？
- 相册权限： Privacy - Photo Library Usage Description  是否允许此App访问你的媒体资料库？