多彩的图片（1） -- Core Image 滤镜

CoreImage 介绍

• 提示：介绍部分文字内容较多，不爱看的话直接略过。
• 参考资料：
  • Core Image Programming Guide
  • Guides and Sample Code
  • Core Image Filter Reference
  • Documentation

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地址。