多彩的图片(1) -- Core Image 滤镜

CoreImage 介绍

CoreImage是苹果公司为了简化图片处理的难度而开发出来的类库。提供了强大高效的图像处理功能,内置了很多强大的滤镜(Filter) , 这些Filter 提供了各种各样的效果, 并且还可以通过滤镜链将各种效果的Filter叠加起来形成强大的自定义效果。

  • 苹果官方的说明如下

Core Image is an image processing and analysis technology designed to provide near real-time processing for still and video images. It operates on image data types from the Core Graphics, Core Video, and Image I/O frameworks, using either a GPU or CPU rendering path. Core Image hides the details of low-level graphics processing by providing an easy-to-use application programming interface (API). You don’t need to know the details of OpenGL, OpenGL ES, or Metal to leverage the power of the GPU, nor do you need to know anything about Grand Central Dispatch (GCD) to get the benefit of multicore processing. Core Image handles the details for you.

  • 使用谷歌翻译了一下

Core Image 是一种图像处理和分析技术,旨在为静止和视频图像提供接近实时的处理。它使用GPU或CPU渲染路径对来自Core Graphics,Core Video和Image I / O框架的图像数据类型进行操作。Core Image 通过提供易于使用的应用程序编程接口(API)来隐藏底层图形处理的细节。您不需要了解OpenGL,Op​​enGL ES或Metal的细节以利用GPU的强大功能,您也不需要了解有关Grand Central Dispatch(GCD)的任何信息,以获得多核处理的好处。核心图像处理你的细节。

总之,说了这么一大堆废话,就是想说一件事,所有底层细节问题苹果都处理好了,咱们就照着API撸代码就成。

CoreImage 滤镜基本使用

废话不多说,直接上代码。下载Demo地址。

// 1. 创建一个CIImage
UIImage *demoImg = [UIImage imageNamed:@"HS"];
CIImage *ciImage = [[CIImage alloc] initWithImage:demoImg];
// 2. 创建一个CIFilter(滤镜)
CIFilter *ciFilter = [CIFilter filterWithName:@"CICrystallize"];
[ciFilter setValue:ciImage forKey:kCIInputImageKey];
[ciFilter setDefaults];
// 3. 创建绘制上下文CIContext 这里默认CPU渲染
CIContext *ciContext = [[CIContext alloc] initWithOptions:nil];
// 创建CGImage句柄
CGImageRef cgImage = [ciContext createCGImage:[ciFilter outputImage] fromRect:[[ciFilter outputImage] extent]];
// 将CGImage转换为UIImage
UIImageView *demoImgView = [[UIImageView alloc] initWithImage:[UIImage imageWithCGImage:cgImage]];
demoImgView.frame = CGRectMake(20, 90, 365, 210);
[self.view addSubview:demoImgView];
// 释放句柄 - 这里很重要,CGImage 需要手动释放
CGImageRelease(cgImage);

实现效果如下图


@效果图

目前苹果支持近180多个滤镜,大家可以去官方文档查看Core Image Filter Reference
我们也可以再Xcode中打印滤镜的属性。

NSLog(@"%@", ciFilter.attributes);
// 打印结果
2018-01-20 00:08:09.936912+0800 BlogDemo[4777:237048] {
    "CIAttributeFilterAvailable_Mac" = "10.4";
    "CIAttributeFilterAvailable_iOS" = 9;
    CIAttributeFilterCategories =     (
        CICategoryStylize,
        CICategoryVideo,
        CICategoryStillImage,
        CICategoryBuiltIn
    );
    CIAttributeFilterDisplayName = Crystallize;
    CIAttributeFilterName = CICrystallize;
    CIAttributeReferenceDocumentation = "http://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CoreImageFilterReference/index.html#//apple_ref/doc/filter/ci/CICrystallize";
    inputCenter =     {  // 参数名 :kCIInputCenterKey
        CIAttributeClass = CIVector;  // 参数类
        CIAttributeDefault = "[150 150]"; // 默认值
        CIAttributeDescription = "The center of the effect as x and y coordinates.";
        CIAttributeDisplayName = Center;
        CIAttributeType = CIAttributeTypePosition;
    };
    inputImage =     {  // 参数名 : kCIInputImageKey
        CIAttributeClass = CIImage;
        CIAttributeDescription = "The image to use as an input image. For filters that also use a background image, this is the foreground image.";
        CIAttributeDisplayName = Image;
        CIAttributeType = CIAttributeTypeImage;
    };
    inputRadius =     {  // 参数名 :kCIInputRadiusKey
        CIAttributeClass = NSNumber;
        CIAttributeDefault = 20; // 默认值
        CIAttributeDescription = "The radius determines how many pixels are used to create the effect. The larger the radius, the larger the resulting crystals.";
        CIAttributeDisplayName = Radius;
        CIAttributeIdentity = 1; 
        CIAttributeMin = 1;
        CIAttributeSliderMax = 100;  // 最大值
        CIAttributeSliderMin = 1;  // 最小值
        CIAttributeType = CIAttributeTypeDistance;
    };
}

我们可以根据上述打印出的参数进行相关设置。

[ciFilter setValue:[CIVector vectorWithX:200 Y:200] forKey:kCIInputCenterKey];
[ciFilter setValue:@(50) forKey:kCIInputRadiusKey];

让我们看一下效果。

@修改参数后的效果

下载Demo地址。

主要类的介绍

  1. CIImage:看名字也知道,保存图片数据的类;
  2. CIFilter:滤镜类,通过KVO设置相关属性进行图像细节处理的类;
  3. CIContext图像上下文,通过这个类可以设置CPU或GPU渲染,它将滤镜类CIFilter输出的图像进行渲染处理;

  • 按照滤镜效果分类,有如下分类。
kCICategoryDistortionEffect 扭曲效果
kCICategoryGeometryAdjustment 几何开着调整
kCICategoryCompositeOperation 合并
kCICategoryHalftoneEffect Halftone效果
kCICategoryColorAdjustment 色彩调整
kCICategoryColorEffect 色彩效果
kCICategoryTransition 图像间转换
kCICategoryTileEffect 瓦片效果
kCICategoryGenerator 图像生成器
kCICategoryGradient 渐变
kCICategoryStylize 风格化
kCICategorySharpen 锐化、发光
kCICategoryBlur 模糊
  • 按使用场景分类:
kCICategoryStillImage 用于静态图像
kCICategoryVideo 用于视频
kCICategoryInterlaced 用于交错图像
kCICategoryNonSquarePixels 用于非矩形像素
kCICategoryHighDynamicRange 用于HDR
// 通过如下方法可以获取 kCICategoryColorEffect 所包含的所有效果
[CIFilter filterNamesInCategory:kCICategoryColorEffect]

CIColorCrossPolynomial,
CIColorCube,
CIColorCubeWithColorSpace,
CIColorInvert,
CIColorMap,
CIColorMonochrome,
CIColorPosterize,
CIFalseColor,
CIMaskToAlpha,
CIMaximumComponent,
CIMinimumComponent,
CIPhotoEffectChrome,
CIPhotoEffectFade,
CIPhotoEffectInstant,
CIPhotoEffectMono,
CIPhotoEffectNoir,
CIPhotoEffectProcess,
CIPhotoEffectTonal,
CIPhotoEffectTransfer,
CISepiaTone,
CIVignette,
CIVignetteEffect

总结

关于Core Image还有很多更强大的功能,这里我们只是一个入门,简单的使用一下。后续还有关于Core Image更深入的介绍和综合的实战应用。我也是想通过写一系列的文章进行总结和提升。如果文章中有错误,欢迎大佬们踊跃指出。如果您有其他更好的想法,可劲评论我吧。
最后附上GitHub地址

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

推荐阅读更多精彩内容