CoreImage框架中最焦点代表图像的目的,要想落成模糊效果

第一有些CoreImage效果

CoreImage是iOS5中新加盟的Objective-C的框架,提供了强大高效的图像处理效果,用来对基于像素的图像进行操作与分析。

介绍

1).CoreImage
2).是一个图像框架 他是基于OpenGL顶层创建 底层则用着色器来处理图像
3).他利用GPU基于硬件加速处理图像
4).CoreImage 中有很多滤镜
5).它们能够一次给予一张图像或者视频帧多种视觉效果 -> 滤镜链
6).而且滤镜可以连接起来组成一个滤镜链 把滤镜效果叠加起来处理图像

自iOS7方始,苹果的序列中多量用到了模糊效果,如下拉出文告中央,或是点击Assistive
Touch出现弹窗时,背景都会被模糊,从而使得靠前的内容更便于得到用户的钟情。

本文来源<零距离仰望星空>http://www.jianshu.com/p/6dd0eab888a6

iOS开发中有些时候须求将图纸设置模糊,来完毕特定的功效获得更好的用户体验,
iOS7过后半透明模糊效果得到大范围使用的可比大,现在也得以看到不少用到有的用到了图片模糊效果,可以通过高斯模糊和毛玻璃效果达到图片模糊效果。

图片 1

左手玻璃左侧模糊.jpg


1. CoreImage框架

CoreImage框架中最要旨代表图像的目标。保存图像数据的类,能够通过UIImage,图像文件或者像素数量成立。创立类格局如下:

imageWithContentsOfURL: 
imageWithData:imageWithCGImage:
imageWithCVPixelBuffer:

对此开发者来说,要想完结模糊效果,常用的措施有:

高斯模糊效果

  1. CoreImage:
    iOS5.0之后就现身了Core Image的API,Core
    Image的API被放在CoreImage.framework库中, 在iOS和OS X平台上,Core
    Image都提供了汪洋的滤镜(Filter),在OS
    X上有120多样Filter,而在iOS上也有90多。
    +(UIImage *)coreBlurImage:(UIImage *)image
    withBlurNumber:(CGFloat)blur
    {
    CIContext *context = [CIContext contextWithOptions:nil];
    CIImage *inputImage= [CIImage
    imageWithCGImage:image.CGImage];
    //设置filter
    CIFilter *filter = [CIFilter
    filterWithName:@”CIGaussianBlur”];
    [filter setValue:inputImage forKey:kCIInputImageKey]; [filter
    setValue:@(blur) forKey: @”inputRadius”];
    //模糊图片
    CIImage *result=[filter valueForKey:kCIOutputImageKey];
    CGImageRef outImage=[context createCGImage:result
    fromRect:[result extent]];
    UIImage *blurImage=[UIImage imageWithCGImage:outImage];
    CGImageRelease(outImage);
    return blurImage;
    }
  1. vImage
    vImage属于Accelerate.Framework,要求导入 Accelerate下的
    Accelerate头文件,
    Accelerate首借使用来做数字信号处理、图像处理相关的向量、矩阵运算的库。图像可以认为是由向量或者矩阵数据整合的,Accelerate里既是提供了高效的数学运算API,自然就能便宜大家对图像做各样各个的拍卖
    ,模糊算法使用的是vImageBoxConvolve_ARGB8888那一个函数。
    +(UIImage *)boxblurImage:(UIImage *)image
    withBlurNumber:(CGFloat)blur
    {
    if (blur < 0.f || blur > 1.f) {
    blur = 0.5f;
    }
    int boxSize = (int)(blur * 40);
    boxSize = boxSize – (boxSize % 2) + 1;
    CGImageRef img = image.CGImage;
    vImage_Buffer inBuffer, outBuffer;
    vImage_Error error;
    void pixelBuffer;
    //从CGImage中获取数据
    CGDataProviderRef inProvider = CGImageGetDataProvider(img);
    CFDataRef inBitmapData = CGDataProviderCopyData(inProvider);
    //设置从CGImage获取对象的属性
    inBuffer.width = CGImageGetWidth(img);
    inBuffer.height = CGImageGetHeight(img);
    inBuffer.rowBytes = CGImageGetBytesPerRow(img);
    inBuffer.data = (void
    )CFDataGetBytePtr(inBitmapData);
    pixelBuffer = malloc(CGImageGetBytesPerRow(img) *
    CGImageGetHeight(img));
    if(pixelBuffer == NULL)
    NSLog(@”No pixelbuffer”);
    outBuffer.data = pixelBuffer;
    outBuffer.width = CGImageGetWidth(img);
    outBuffer.height = CGImageGetHeight(img);
    outBuffer.rowBytes = CGImageGetBytesPerRow(img);
    error = vImageBoxConvolve_ARGB8888(&inBuffer, &outBuffer, NULL, 0,
    0, boxSize, boxSize, NULL, kvImageEdgeExtend);
    if (error) {
    NSLog(@”error from convolution %ld”, error);
    }
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef ctx = CGBitmapContextCreate( outBuffer.data,
    outBuffer.width, outBuffer.height, 8, outBuffer.rowBytes,
    colorSpace, kCGImageAlphaNoneSkipLast);
    CGImageRef imageRef = CGBitmapContextCreateImage (ctx);
    UIImage *returnImage = [UIImage imageWithCGImage:imageRef];
    //clean up CGContextRelease(ctx);
    CGColorSpaceRelease(colorSpace);
    free(pixelBuffer);
    CFRelease(inBitmapData);
    CGColorSpaceRelease(colorSpace);
    CGImageRelease(imageRef);
    return returnImage;
    }
2. CIFilter类

CIFilter类负责图片属性进行细节处理的类

作用分类:

kCICategoryDistortionEffect 扭曲效果,比如bump、旋转、hole
kCICategoryGeometryAdjustment 几何开着调整,比如仿射变换、平切、透视转换
kCICategoryCompositeOperation 合并,比如源覆盖(source over)、最小化、源在顶(source atop)、色彩混合模式
kCICategoryHalftoneEffect Halftone效果,比如screen、line screen、hatched
kCICategoryColorAdjustment 色彩调整,比如伽马调整、白点调整、曝光
kCICategoryColorEffect 色彩效果,比如色调调整、posterize
kCICategoryTransition 图像间转换,比如dissolve、disintegrate with mask、swipe 
kCICategoryTileEffect 瓦片效果,比如parallelogram、triangle
kCICategoryGenerator 图像生成器,比如stripes、constant color、checkerboard
kCICategoryGradient 渐变,比如轴向渐变、仿射渐变、高斯渐变
kCICategoryStylize 风格化,比如像素化、水晶化 kCICategorySharpen 锐化、发光
kCICategoryBlur 模糊,比如高斯模糊、焦点模糊、运动模糊

按使用境况分类

kCICategoryStillImage 用于静态图像 
kCICategoryVideo 用于视频 
kCICategoryInterlaced 用于交错图像 
kCICategoryNonSquarePixels 用于非矩形像素 
kCICategoryHighDynamicRange 用于HDR

作用如下:

图片 2

1.png

1. 优点: 模糊效果较好,模糊程度的可调范围很大,可以根据实际的需求随意调试。
2. 缺点: 耗时
3. 需要导入: #import <CoreImage/CoreImage.h>

步骤

1.实例CIImage—>UIImage—>CGImageRef —> CIImage
2.创建CIFilter滤镜并给滤镜设置属性(KVC)
3.创建CIContext上下文
4.合并滤镜输出的图像 ->得到一个合并之后的图像 
5.赋给UIImageView对象进行显示

代码如下:

ViewController* __block  blockSelf = self;
    dispatch_async(dispatch_get_global_queue(0, 0), ^{

        UIImage *sourceImage = [UIImage imageNamed:@"test"];

        CIContext *context = [CIContext contextWithOptions:nil];
        //CIImage
        CIImage *ciImage = [[CIImage alloc] initWithImage:sourceImage];
        //过滤器<有很多种, 在下边打印的有>
        CIFilter *blurFilter = [CIFilter filterWithName:@"CIGaussianBlur"];
        //将图片输入到滤镜中
        [blurFilter setValue:ciImage forKey:kCIInputImageKey];
        //设置模糊程度
        [blurFilter setValue:@(5) forKey:@"inputRadius"];

        NSLog(@"查看blurFilter的属性--- %@",blurFilter.attributes);

        //将处理之后的图片输出
        CIImage *outCIImage = [blurFilter valueForKey:kCIOutputImageKey];

        /** 获取CGImage句柄
         *  createCGImage: 处理过的CIImage
         *  fromRect: 如果从处理过的图片获取frame会比原图小, 因此在此需要设置为原始的CIImage.frame
         */
        CGImageRef outCGImageRef = [context createCGImage:outCIImage fromRect:[ciImage extent]];
        //获取到最终图片
        UIImage *resultImage = [UIImage imageWithCGImage:outCGImageRef];
        //释放句柄
        CGImageRelease(outCGImageRef);

        dispatch_async(dispatch_get_main_queue(), ^{
            blockSelf.imageView.image = resultImage;
        });

    });
  • 运用苹果开源的UIImage+ImageEffects这么些分类
  • 使用UIToolbar或是UINavigationBar
  • 动用iOS8中提供的UIVisualEffectView

主意调用

      UIImageView  *imageView=[[UIImageView alloc]initWithFrame:CGRectMake(0, 300, SCREENWIDTH, 100)]; 
      imageView.contentMode=UIViewContentModeScaleAspectFill;
      imageView.image=[UIImage boxblurImage:image withBlurNumber:0.5]; 
      imageView.clipsToBounds=YES;
      [self.view addSubview:imageView];

3.GPUImage
GPUImage是用装备的GPU来实时处理图片,给图片加各样滤镜效果的一个开源库。
可以实时地给相机加上滤镜效果,很多App都扶助那种实时滤镜。
链接地址:https://github.com/BradLarson/GPUImage

区别:
职能:第一种Core
Image设置模糊之后会在方圆发出白边,vImage使用不设有任何难点;
特性:图像模糊处理属于复杂的盘算,大多数图片模糊选拔的是vImage,品质最佳
品种地址:
https://github.com/524429264/iOS-UIImageBoxBlur
参考资料:https://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CoreImageFilterReference/index.html\#//apple\_ref/doc/filter/ci/CIGaussianBlur

第二部分UIVisualEffect效果

iOS
8
后,苹果开放了好多创建特效的接口,其中就包涵成立毛玻璃(blur)的接口。

想创立一个特殊效果(如blur效果),可以创制一个UIVisualEffectView视图对象,那些目标提供了一种简单的不二法门来促成复杂的视觉效果。那些可以把那些目标看作是功效的一个容器,实际的功效会潜移默化到丰裕到该视图对象的contentView中的内容。

UIVisualEffect是一个持续自NSObject的创设视觉效果的基类,没有提供任何新的习性和艺术。其首要性目的是用以初叶化UIVisualEffectView,在那一个初步化方法中得以流传UIBlurEffect或者UIVibrancyEffect对象。

一言九鼎选拔的类/分歧/注意事项:

1. UIBlurEffect对象用于将blur(毛玻璃)效果应用于UIVisualEffectView视图下面的内容。**只有三种枚举值**
2. UIVibrancyEffect: 主要用于放大和调整UIVisualEffectView视图下面的内容的颜色;让contentView中的内容看起来更加生动;
3. 尽量避免将UIVisualEffectView对象的alpha值设置为小于1.0的值,因为创建半透明的视图会导致系统在离屏渲染时去对UIVisualEffectView对象及所有的相关的子视图做混合操作。这不但消耗CPU/GPU,也可能会导致许多效果显示不正确或者根本不显示。

功效如下

图片 3

2.png

代码如下

- (IBAction)useEffect:(id)sender {

    self.imageView.image = [UIImage imageNamed:@"2"];

    // Blur effect 模糊效果
    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    blurEffectView.frame = CGRectMake(50, 30, self.imageView.frame.size.width - 100, self.imageView.frame.size.height - 60);
    [self.imageView addSubview:blurEffectView];

    // Vibrancy effect 生动效果<根据背景图实时调整文字颜色>
    UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];
    UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];
    vibrancyEffectView.frame = CGRectMake(50, 30, self.imageView.frame.size.width - 100, self.imageView.frame.size.height - 60);
    // 添加vibrancy view 到 blur view的contentView上
    [blurEffectView.contentView addSubview:vibrancyEffectView];

    // 效果字体
    UILabel *label = [[UILabel alloc] init];
    label.text = @"UIVibrancyEffect";
    label.font = [UIFont systemFontOfSize:28.0f];
    [label sizeToFit];
    label.frame = CGRectMake(10, 10, 200, 60);
    // 添加label到the vibrancy view的contentView上
    [vibrancyEffectView.contentView addSubview:label];


}

利用storyboard

详细请看UIVisualEffectView达成高斯模糊效果(stroyboar和纯代码)

图片 4

屏幕快照 2016-08-12 深夜10.40.44.png

上边分别演示那3种艺术,并分析其利用场面和优缺点。示例中选拔了一张图纸,原始效果如下所示:

毛玻璃效果

  1. 苹果在iOS7.0之后,很多系统界面都施用了毛玻璃效果,增添了界面的赏心悦目性,比如公告中央界面;其实在iOS7.0(包蕴)之前照旧有序列的类能够达成毛玻璃效果的,
    就是 UIToolbar这些类
    iOS7.0
    毛玻璃的体制(枚举)
    UIBarStyleDefault = 0,
    UIBarStyleBlack = 1,
    UIBarStyleBlackOpaque = 1, // Deprecated. Use UIBarStyleBlack
    UIBarStyleBlackTranslucent = 2, // Deprecated. Use UIBarStyleBlack
    and set the translucent property to YES

    UIImageView *bgImgView = [[UIImageView alloc] initWithFrame:self.view.bounds];

    bgImgView.image = [UIImage imageNamed:@"huoying4.jpg"];
    [self.view addSubview:bgImgView];
   UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0,  0, bgImgView.frame.size.width*0.5, bgImgView.frame.size.height)];
    toolbar.barStyle = UIBarStyleBlackTranslucent;
    [bgImgView addSubview:toolbar];

2.在iOS8.0之后,苹果新增了一个类UIVisualEffectView,通过这些类来贯彻毛玻璃效果与地方的UIToolbar一样,而且成效也卓殊之高,使用也是万分简单,几行代码搞定.
UIVisualEffectView是一个抽象类,不能一贯动用,需通过它下边的几个子类来兑现(UIBlurEffect,
UIVisualEffevt, UIVisualEffectView);

子类UIBlurEffect只有一个类措施,用来疾速创制一个毛玻璃效果,参数是一个枚举,用来安装毛玻璃的体裁,而UIVisualEffectView则多了多个属性和七个构造方法,用来快速将创建的毛玻璃添加到那么些UIVisualEffectView上.

越发注意: 那几个类是iOS8.0事后才适用, 所以假若项目要包容iOS7.0的话,
照旧要考虑其他的三种格局了.
心想事成代码:

同样是先疾速的实例化UIBlurEffect并设置毛玻璃的体裁,然后再经过UIVisualEffectView的构造方法将UIBlurEffect的实例添加上去,
最后设置frame或者是经过抬高约束,
将effectView添加到要促成了毛玻璃的效率的view控件上,效果图和地方的一样.
iOS8.0
毛玻璃的体制(枚举)
UIBlurEffectStyleExtraLight,
UIBlurEffectStyleLight,
UIBlurEffectStyleDark

    UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
       UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
     effectView.frame = CGRectMake(0, 0, bgImgView.frame.size.width*0.5, bgImgView.frame.size.height);
     [bgImgView addSubview:effectView];

其三部分

前往苹果官方文档下载UIImage+ImageEffects.h/.m文件,
导入工程;

图片 5

3.png

代码如下

//苹果推出的框架
- (IBAction)useEffects:(id)sender {
    //模糊区域
    self.imageView.image = [[UIImage imageNamed:@"test"] blurImageAtFrame:CGRectMake(0.0, 0.0, 155.0*2 , 235.0*4.0)];
    //全部模糊
    //self.imageView.image = [[UIImage imageNamed:@"test"] blurImage];
   // self.imageView.image = [[UIImage imageNamed:@"test"] blurImageWithMask:[UIImage imageNamed:@"2"]];
}

图片 6

项目地址:https://github.com/524429264/EffectViewDemo

第四有的

UIView的子类FXBlurView,
来完结模糊效果

图片 7

4.png

- (IBAction)useFXBlurView:(id)sender {

    FXBlurView *fxView = [[FXBlurView alloc] initWithFrame:CGRectMake(0, 0, self.imageView.frame.size.width, self.imageView.frame.size.height)];
    //动态
    fxView.dynamic = NO;
    //模糊范围
    fxView.blurRadius = 10;
    //背景色
    fxView.tintColor = [UIColor clearColor];
    [self.imageView addSubview:fxView];

}

test@2x.png

第五部分

效用图如下:

图片 8

5.png

GPUImage是用配备的GPU来实时处理图片,给图片视频加种种滤镜效果的一个开源库,
太牛逼的一个框架, 感觉用在这里有些大材小用了….

 ViewController* __block  blockSelf = self;
    dispatch_async(dispatch_get_global_queue(0, 0), ^{

        // 高斯模糊
        GPUImageGaussianBlurFilter * blurFilter = [[GPUImageGaussianBlurFilter alloc] init];
        blurFilter.blurRadiusInPixels = 10;
        UIImage *blurImage = [blurFilter imageByFilteringImage:[UIImage imageNamed:@"test"]];

        dispatch_async(dispatch_get_main_queue(), ^{
            blockSelf.imageView.image = blurImage;
        });
    });

Demo详见github


参考

1.用到UIVisualEffectView为视图添加特殊效果
2.UIVisualEffectView已毕高斯模糊效果(stroyboar和纯代码)
3.CoreImage

更加多出色内容请关怀“IT实战联盟”哦~~~

图片 9

IT实战联盟.jpg

UIImage+ImageEffects

苹果开源的代码,能够在那边下载:
UIImage+ImageEffects.h,
UIImage+ImageEffects.m
那种艺术实际上是对加载出的UIImage举办处理,得到模糊效果后,能够运用UIImage对象创制视图。示例代码如下:

UIImage *image = [UIImage imageNamed: @"test"];
image = [image applyLightEffect];
UIImageView *backgroundView = [[UIImageView alloc] initWithFrame: self.view.bounds];
backgroundView.contentMode = UIViewContentModeScaleAspectFill;
backgroundView.image = image;
[self.view addSubview: backgroundView];

效率如下:

图片 10

applyLightWithCategory.png

接纳场地:必要对静态的图形进行模糊时
优点:

  • iOS7就可以动用
  • 官方代码,品质上有有限支撑
  • API简单易用
  • 可以控制参数,调节模糊效果

动用UIToolbar或是UINavigationBar覆盖在要模糊内容的下边

那五个控件覆盖在其他视图上方时,可以见到上边的情节,并且是破绽百出效果。

    UIImage *image = [UIImage imageNamed: @"test"];
    UIImageView *backgroundView = [[UIImageView alloc] initWithFrame: self.view.bounds];
    backgroundView.contentMode = UIViewContentModeScaleAspectFill;
    backgroundView.image = image;
    [self.view addSubview: backgroundView];

    UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame: self.view.bounds];
    [self.view addSubview: toolbar];

作用如下:

图片 11

toolbar.png

使用场馆:要是被歪曲的情节不是静态内容,会在显示屏上动,那么只好使用那种办法。
亮点:可以支撑较低的系统版本
症结:不可调节模糊效果,并且与第一种艺术的功能并差异

使用UIVisualEffectView

在iOS8中,苹果引入了UIVisualEffectView以及UIVisualEffect,利用这一个新的特征,卓殊不难添加两种功效:
UIBlurEffect(高斯模糊)以及UIVibrancyEffect(那种功效率把当下视图和背景视图混合起来)。

    UIImage *image = [UIImage imageNamed: @"test"];
    UIImageView *backgroundView = [[UIImageView alloc] initWithFrame: self.view.bounds];
    backgroundView.contentMode = UIViewContentModeScaleAspectFill;
    backgroundView.image = image;
    [self.view addSubview: backgroundView];

    UIBlurEffect *blur = [UIBlurEffect effectWithStyle: UIBlurEffectStyleLight];
    UIVisualEffectView *blurView = [[UIVisualEffectView alloc] initWithEffect: blur];
    blurView.frame = self.view.bounds;
    [backgroundView addSubview: blurView];

    UIVisualEffectView *vibrancyView = [[UIVisualEffectView alloc] initWithEffect: [UIVibrancyEffect effectForBlurEffect: blur]];
    vibrancyView.frame = blurView.bounds;
    [blurView.contentView addSubview: vibrancyView];

    UIImageView *iconView = [[UIImageView alloc] initWithImage: [UIImage imageNamed: @"level_2"]];
    iconView.center = CGPointMake(vibrancyView.bounds.size.width / 2, vibrancyView.bounds.size.height / 2);
    [vibrancyView.contentView addSubview: iconView];

    UIImageView *withoutVibrancy = [[UIImageView alloc] initWithImage: [UIImage imageNamed: @"level_2"]];
    withoutVibrancy.center = CGPointMake(vibrancyView.bounds.size.width / 2,  vibrancyView.bounds.size.height / 2 - 100);
    [backgroundView addSubview: withoutVibrancy];

行使时要专注以下几点:

  • 兑现模糊时,要将BlurEffectView添加为相应视图的子视图
  • 完结Vibrancy时,要将VibrancyEffectView首先添加到blurView.contentView,再将索要vibrancy效果的视图,添加到vibrancyView.contentView,否则不会有效益。

意义如下:

图片 12

blur_vibrancy.png

背景图中添加了八个UIImageView,上边的尚未Vibrancy效果,上面的有。

可取:苹果原生帮忙
缺陷:iOS8及以上的系统可选用;不协助调节参数。

总结

除了,还有使用CoreImage中的高斯滤镜,以及GPUImage的艺术,作者以为相比较麻烦,那里就不提及了。

相关文章