iOS CoreImage之滤镜简单使用

老骥伏枥,志在千里

前记

最近一直在研究图像处理方面,既上一篇iOS Quart2D绘图之UIImage简单使用后,就一直在学习关于CoreImage图像滤镜处理。中间也看了不少文章,也得到了不少帮助,下面就结合这些知识和我自己的认识,记录一下,方便自己,方便他人

  • 作用:对图像进行滤镜操作,比如模糊、颜色改变、锐化、人脸识别等。
  • Core Graphics对比:基于Quartz 2D绘图引擎的绘图API,通过它可以进行绘图功能、常用的剪切裁剪合成等。
简介

Core Image是一个很强大的框架。它可以让你简单地应用各种滤镜来处理图像,比如修改鲜艳程度, 色泽, 或者曝光。 它利用GPU(或者CPU)来非常快速、甚至实时地处理图像数据和视频的帧。并且隐藏了底层图形处理的所有细节,通过提供的API就能简单的使用了,无须关心OpenGL或者OpenGL ES是如何充分利用GPU的能力的,也不需要你知道GCD在其中发挥了怎样的作用,Core Image处理了全部的细节

大概方式.png
实现方式

Core Image滤镜需要一副输入图像(生成图像的滤镜除外)以及一些定制滤镜行为的参数。被请求时,Core Image将滤镜应用于输入图像,并提供一副输出图像。在应用滤镜方面,Core Image的效率极高:仅当输出图像被请求时才应用滤镜,而不是在指定时就应用它们;另外,Core Image尽可能将滤镜合并,以最大限度地减少应用滤镜的计算量。

涉及API
  • CIImage :这是一个模型对象,它保存能构建图像的数据,可以是图像的Data,可以是一个文件,也可以是CIFilter输出的对象。
  • CIContext :上下文,是框架真正工作的地方,它需要分配必要的内存,并编译和运行滤镜内核来执行图像处理。建立一个上下文是非常昂贵的,所以你会经常想创建一个反复使用的上下文。
  • CIFilter :滤镜对象,主要是对图像进行处理的类。通过设置一些键值来控制滤镜的具体效果

注:Core ImageCore Graphics使用的是左下原点坐标

到此有一个疑问?就是苹果怎么会弄出这么多image,比如CIImageUIImageCGImageRef,有什么区别呢?为了弄清这个问题,我也特别搜寻了一番,下面也记录一下

UIImage:管理图片数据,主要用来展现,Image对象并没有提供直接访问相关的图片数据的操作, 因此你总是通过已经存在的图片数据来创建它

CGImage:是基于像素的矩阵,每个点都对应了图片中点的像素信息

CIImage:包含了创建图片的所有必要的数据,但其本身没有渲染成图片,它代表的是图像数据或者生成图像数据的流程(如滤镜)。拥有与之关联的图片数据, 但本质上并不是一张图片,你可以CIImage对象作为一个图片的"配方"。CIImage对象拥有生成一张图片所具备的所有信息,但Core Image并不会真正的去渲染一张图片, 除非被要求这么做。


使用方式
  • 1 . CIImage创建,在使用滤镜之前,你必须要先有一个CIImage对象,在拥有该对象后结合CIFilter才能实现我们的滤镜效果。这里需要注意的是,如果直接使用image.cIImage,那么很遗憾的告诉你,你将得到一个nil,哈哈
    如下:

image.CIImage.png

原因在UIImageAPI中有介绍// returns underlying CIImage or nil if CGImageRef based,应该是说图片可能不是基于CIImage而创建的
正确的方式为

 //得到CIImage
 CIImage *inputCIImage = [[CIImage alloc] initWithImage:_image];
  • 2 . CIFilter创建方式大概有下面三种
+(nullable CIFilter *) filterWithName:(NSString *) name
+(nullable CIFilter *)filterWithName:(NSString *)name
                        keysAndValues:key0, ... NS_REQUIRES_NIL_TERMINATION NS_SWIFT_UNAVAILABLE("");
+(nullable CIFilter *)filterWithName:(NSString *)name
                  withInputParameters:(nullable NSDictionary<NSString *,id> *)params NS_AVAILABLE(10_10, 8_0);

方法上都差不多,只是后面两个在初始化的时候加入了一些键值,在API文档中,可以查到很多键值,这里需要说明下,键值kCIInputImageKey是我们必须要设置的,这是为我们的滤镜对象设置输入图像,图像的值为CIImage对象,方法如下

[_filter setValue:inputCIImage forKey:kCIInputImageKey];

方法中的name就是我们需要用的滤镜效果,具体效果,可以在官网上面进行查询,如下

filter.png

下面,我们以冲印效果为例,冲印属于CICategoryColorEffect中的CIPhotoEffectProcess

 //创建滤镜对象
CIFilter *ciFilter = [CIFilter filterWithName:@"CIPhotoEffectProcess" keysAndValues:kCIInputImageKey,ciImage, nil];

大概效果如下

冲印.png

注意:
1、在设置键值的时候,我们需要有选择性的进行设置,具体怎么选择呢?
比如上面的冲印效果,在官方文档是这么展示的

冲印展示.png

只有一个必须输入的inputImage,因此不需要其它参数就可以实现
又比如高斯模糊CIGaussianBlur,在官方文档中,是这么展示的

高斯模糊展示.png

如果我们需要控制其模糊半径,可以这么设置

[ciFilter setValue:@(20.f) forKey:@"inputRadius"];

2、CIFilter 并不是线程安全的,这意味着 一个 CIFilter对象不能在多个线程间共享。如果你的操作是多线程的,每个线程都必须创建自己的 CIFilter 对象,而CIContextCIImage对象都是不可修改的, 意味着它们可以在线程之间安全的共享。多个线程可以使用同样的GPU或者CPUCIContext对象来渲染CIImage对象

CIFilter类中,还有一些其他函数,可能是我们需要用到的,这里也简单说明下

//输入的键值信息
NSArray<NSString *> *inputKeys;
//输出的键值信息
NSArray<NSString *> *outputKeys;
//返回滤镜的属性描述信息
NSDictionary<NSString *,id> *attributes;
//将所有输入键值的值设为默认值(曾经乱用,导致我的滤镜效果完全没有任何反应,差点怀疑人生...)
- (void)setDefaults;
//根据滤镜的key查找其下面的所以子类效果
+ (NSArray<NSString *> *)filterNamesInCategory:(nullable NSString *)category

  • 3 . CIContext 在创建结果图片的时候需要用到,刚开始用的时候,出于好奇用了两种不同的方法来返回结果,本以为....我会有一个方式获取不到处理后的结果,然而大跌眼镜,居然有....
    CIImage *outPutImage = [ciFilter outputImage];
    //获取上下文
    CIContext *context = [CIContext contextWithOptions:nil];
    
    CGImageRef cgImage = [context createCGImage:outPutImage fromRect:outPutImage.extent];
    
    UIImage *filter_image = [UIImage imageWithCGImage:cgImage];
    CGImageRelease(cgImage);
    
    
//    UIImage *filter_image = [UIImage imageWithCIImage:outPutImage];

就是上面屏蔽的代码部分imageWithCIImage,这就使我纳闷了,于是猜测并查阅资料,原来在调用该方法的时候,其实是隐式的声明了CIContext,这样看来,哇!好简单,省了我一堆代码,然而,这却引起另外的问题了,就是每次都会重新创建一个 CIContext,然而 CIContext的代价是非常高的。并且,CIContextCIImage 对象是不可变的,在线程之间共享这些对象是安全的。所以多个线程可以使用同一个 GPU 或者 CPU
CIContext对象来渲染 CIImage 对象。所以我们不应该使用 imageWithCIImage 来生成UIImage,而应该用上述另外一种方式来获取结果图像。

Core Image 效率

Core Image在处理图像的时候,可以有两种选择GPUCPU,在Context中可以对其进行设置,通过设置键值,这里的键值为kCIContextUseSoftwareRenderer,默认情况下,是为GPU处理方式,如果将其设置为YES,则为CPU处理
如下

//CPU处理
CIContext *context = [CIContext contextWithOptions:[NSDictionary dictionaryWithObject:[NSNumber numberWithBool:YES] forKey:kCIContextUseSoftwareRenderer]];

如果通过GPU的话,速度就会更快,利用了GPU硬件的并行优势,可以使用 OpenGLES 或者Metal 来渲染图像,这种方式CPU完全没有负担,应用程序的运行循环不会受到图像渲染的影响。但是也有个问题,就是如果APP运行到后台的时候,GPU就会停止处理,等回到前台的时候又继续,而如果采取CPU来处理的话,就不会出现这么一种情况,在前面的图中,我们可以看到CPU是采用GCD的方式来对图像进行渲染。所以在使用的时候,还是需要分情况,如果是处理复杂的操作,比如高斯模糊这样的,建议还是用GPU来处理,可以节省CPU的开销,如果在后台还需要操作的话,可以使用CPU来操作。

    //
    CIImage *outPutImage = [ciFilter outputImage];
    //获取上下文
    CIContext *context = [CIContext contextWithOptions:nil];
    
    CGImageRef cgImage = [context createCGImage:outPutImage fromRect:outPutImage.extent];
    
    UIImage *filter_image = [UIImage imageWithCGImage:cgImage];
    CGImageRelease(cgImage);

上面的这段代码是通过GPU的方式来处理图像,然后得到结果UIImage,最后再赋值给UIImageView

1.jpg

分析下这个过程:
1、将图像上传到GPU,然后进行滤镜处理
2、得到CGImageRef cgImage的时候,又将图像复制到了CPU
3、在赋值给UIImageView进行显示的时候,又需要通过GPU处理位图数据,进行渲染
这样的话,我们就在GPU-CPU-GPU上循环操作,在性能上肯定是有一定的损耗的,那么为了避免这种问题,我们该这怎么办呢?
查看API,我们可以看到有这么一个函数

+ (CIContext *)contextWithEAGLContext:(EAGLContext *)eaglContext

EAGLContext:是基于OpenGL ES的上下文
通过上面的函数,我们通过OpenGL ES的上下文创建的Core Image的上下文就可以实时渲染了,并且渲染图像的过程始终在 GPU上进行,但是要显示图像,又该怎么办呢?如果还是用UIImageView的话,那么势必会回到CPU上,这里,我们可以用GLKView,一个属于GLKIT中的类,通过GLKView和其属性@property (nonatomic, retain) EAGLContext *context来将图像绘制出来,这样的话,就能保证我们的滤镜,一直在GPU上进行,大大的提高效率。
针对该方案,我自定义了一个类似UIImageView的类FilterImageView

//FilterImageView.h
#import <GLKit/GLKit.h>

@interface FilterImageView : GLKView

@property (nonatomic,strong) UIImage *image;

@property (nonatomic,strong) CIFilter *filter;

@end

.m文件核心代码

//FilterImageView.m
- (id)initWithFrame:(CGRect)frame
{
    EAGLContext *context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
    self = [super initWithFrame:frame context:context];
    if (self) {
        
        _ciContext = [CIContext contextWithEAGLContext:context options:[NSDictionary dictionaryWithObject:[NSNumber numberWithBool:NO] forKey:kCIContextUseSoftwareRenderer]];
        //超出父视图 进行剪切
        self.clipsToBounds = YES;
    }
    return self;
}

- (void)drawRect:(CGRect)rect
{
    if (_ciContext && _image) {
        //得到CIImage
        CIImage *inputCIImage = [[CIImage alloc] initWithImage:_image];
        
        CGRect inRect = [self imageBoundsForContentModeWithFromRect:inputCIImage.extent
                                                             toRect:CGRectMake(0, 0, self.drawableWidth, self.drawableHeight)];
        
        if (_filter) {
            [_filter setValue:inputCIImage forKey:kCIInputImageKey];
            //根据filter得到输出图像
            if (_filter.outputImage) {
                //渲染开始
                [_ciContext drawImage:_filter.outputImage
                               inRect:inRect
                             fromRect:inputCIImage.extent];
            }
        }else{
            [_ciContext drawImage:inputCIImage
                           inRect:inRect
                         fromRect:inputCIImage.extent];
        }
    }
}

如此之后,我们就能提高滤镜的效率,特别是一些复杂的。
关于滤镜,能写的就只要这么多了,在学习中,也确实发现这是一个好东西,可以做很多炫酷的东西出来,为此,特意做了一个简单的Demo,目前还未完善,希望各位勿喷。

参考文章

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,175评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,674评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,151评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,597评论 1 269
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,505评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,969评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,455评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,118评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,227评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,213评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,214评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,928评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,512评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,616评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,848评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,228评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,772评论 2 339

推荐阅读更多精彩内容