图像精修之道——iOS图片高级处理之三

IOS

2024-01-08 16:48:42

前言

在iOS开发中，图片处理是一项常见而重要的工作。我们需要对图片进行各种各样的处理，包括图片合成、像素处理、滤镜应用等。这些处理操作可以帮助我们优化图片的显示效果，提高用户体验。

iOS图片处理框架介绍

目前，iOS平台上有很多优秀的图片处理框架。这些框架可以帮助我们快速实现各种各样的图片处理需求。以下是一些常用的iOS图片处理框架：

Core Image：Core Image是苹果公司推出的iOS系统自带的图片处理框架。它提供了丰富的图像处理功能，包括色彩调整、几何变换、滤镜应用等。
GPUImage：GPUImage是一个基于OpenGL ES的图像处理框架。它可以利用GPU的强大计算能力，实现实时图像处理。GPUImage提供了丰富的滤镜库，可以满足各种各样的图像处理需求。
系统图片库：系统图片库是iOS系统自带的图片处理库。它提供了一些基本的图片处理功能，如缩放、裁剪、旋转等。

实践项目

为了更好地理解这些图片处理框架的使用方法，我们通过一个实践项目来演示这些框架的使用。这个项目的目标是实现一个简单的图片编辑器，可以对图片进行裁剪、缩放、旋转、添加滤镜等操作。

项目结构

这个项目由以下几个部分组成：

ViewController.h：视图控制器头文件。
ViewController.m：视图控制器实现文件。
ImageEditorView.h：图片编辑器视图头文件。
ImageEditorView.m：图片编辑器视图实现文件。
CoreImageFilterManager.h：Core Image滤镜管理器头文件。
CoreImageFilterManager.m：Core Image滤镜管理器实现文件。
GPUImageFilterManager.h：GPUImage滤镜管理器头文件。
GPUImageFilterManager.m：GPUImage滤镜管理器实现文件。

项目实现

1. 视图控制器

视图控制器是项目的入口，负责管理图片编辑器的视图。在视图控制器的viewDidLoad方法中，我们首先创建了一个图片编辑器视图，并将其添加到视图控制器。然后，我们为图片编辑器视图添加了一个手势识别器，以便用户可以通过手势对图片进行缩放、裁剪和旋转。

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 创建图片编辑器视图
    ImageEditorView *imageEditorView = [[ImageEditorView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:imageEditorView];
    
    // 为图片编辑器视图添加手势识别器
    UIPinchGestureRecognizer *pinchGestureRecognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(handlePinchGesture:)];
    [imageEditorView addGestureRecognizer:pinchGestureRecognizer];
    
    UIRotationGestureRecognizer *rotationGestureRecognizer = [[UIRotationGestureRecognizer alloc] initWithTarget:self action:@selector(handleRotationGesture:)];
    [imageEditorView addGestureRecognizer:rotationGestureRecognizer];
}

2. 图片编辑器视图

图片编辑器视图是项目的核心组件，负责处理图片的编辑操作。图片编辑器视图中包含了一个UIImageView，用于显示图片。我们还为图片编辑器视图添加了几个按钮，用于控制图片的缩放、裁剪和旋转操作。

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        // 创建UIImageView
        self.imageView = [[UIImageView alloc] initWithFrame:self.bounds];
        self.imageView.contentMode = UIViewContentModeScaleAspectFit;
        [self addSubview:self.imageView];
        
        // 创建按钮
        self.scaleButton = [UIButton buttonWithType:UIButtonTypeCustom];
        self.scaleButton.frame = CGRectMake(0, 0, 50, 50);
        [self.scaleButton setTitle:@"缩放" forState:UIControlStateNormal];
        [self.scaleButton addTarget:self action:@selector(handleScaleButton:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:self.scaleButton];
        
        self.cropButton = [UIButton buttonWithType:UIButtonTypeCustom];
        self.cropButton.frame = CGRectMake(0, 0, 50, 50);
        [self.cropButton setTitle:@"裁剪" forState:UIControlStateNormal];
        [self.cropButton addTarget:self action:@selector(handleCropButton:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:self.cropButton];
        
        self.rotateButton = [UIButton buttonWithType:UIButtonTypeCustom];
        self.rotateButton.frame = CGRectMake(0, 0, 50, 50);
        [self.rotateButton setTitle:@"旋转" forState:UIControlStateNormal];
        [self.rotateButton addTarget:self action:@selector(handleRotateButton:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:self.rotateButton];
    }
    return self;
}

3. 滤镜管理器

滤镜管理器负责管理图片的滤镜效果。我们创建了两个滤镜管理器，分别用于管理Core Image滤镜和GPUImage滤镜。滤镜管理器中包含了一个滤镜库，其中存储了各种各样的滤镜。当用户选择一个滤镜时，滤镜管理器会将该滤镜应用到图片上。

// Core Image滤镜管理器
CoreImageFilterManager *coreImageFilterManager = [[CoreImageFilterManager alloc] init];

// GPUImage滤镜管理器
GPUImageFilterManager *gpuImageFilterManager = [[GPUImageFilterManager alloc] init];

4. 图片编辑操作

图片编辑器视图提供了几个按钮，用于控制图片的缩放、裁剪和旋转操作。当用户点击这些按钮时，图片编辑器视图会调用相应的处理方法。

// 缩放图片
- (void)handleScaleButton:(UIButton *)button {
    // 获取图片的当前缩放比例
    CGFloat currentScale = self.imageView.transform.a;
    
    // 将图片的缩放比例增加10%
    CGFloat newScale = currentScale * 1.1;
    
    // 设置图片的新缩放比例
    self.imageView.transform = CGAffineTransformMakeScale(newScale, newScale);
}

// 裁剪图片
- (void)handleCropButton:(UIButton *)button {
    // 获取图片的当前裁剪区域
    CGRect currentCropRect = self.imageView.frame;
    
    // 将图片的裁剪区域缩小10%
    CGRect newCropRect = CGRectMake(currentCropRect.origin.x + currentCropRect.size.width * 0.1,
                                  currentCropRect.origin.y + currentCropRect.size.height * 0.1,
                                  currentCropRect.size.width * 0.8,
                                  currentCropRect.size.height * 0.8);
    
    // 设置图片的新裁剪区域
    self.imageView.frame = newCropRect;
}

// 旋转图片
- (void)handleRotateButton:(UIButton *)button {
    // 获取图片的当前旋转角度
    CGFloat currentRotation = self.imageView.transform.b;
    
    // 将图片的旋转角度增加10度
    CGFloat newRotation = currentRotation + 10 * M_PI / 180;
    
    // 设置图片的新旋转角度
    self.imageView.transform = CGAffineTransformMakeRotation(newRotation);
}

5. 滤镜应用

图片编辑器视图还提供了几个按钮，用于控制图片的滤镜效果。当用户点击这些按钮时，图片编辑器视图会调用相应的处理方法。

// 应用Core Image滤镜
- (void)handleCoreImageFilterButton:(UIButton *)button {
    // 获取用户选择的滤镜
    CIFilter *filter = [coreImageFilterManager filterAtIndex:button.tag];
    
    // 将滤镜应用到图片上
    CIImage *outputImage = [filter imageByProcessingImage:self.imageView.image];
    
    // 将处理后的图片显示在UIImageView中
    self.imageView.image = [UIImage imageWithCIImage:outputImage];
}

// 应用GPUImage滤镜
- (void)handleGPUImageFilterButton:(UIButton *)button {
    // 获取用户选择的滤镜
    GPUImageFilter *filter = [gpuImageFilterManager filterAtIndex:button.tag];
    
    // 将滤镜应用到图片上
    UIImage *outputImage = [filter imageByProcessingImage:self.imageView.image];