一个模糊(毛玻璃)效果引发的探索


剧情介绍

在iOS开发中,经常会看到毛玻璃效果,也叫模糊效果,比如系统的通知中心,这个很时髦的效果增加了美观性。
通知中心的模糊效果
查看资料发现实现毛玻璃效果有很多种方式,下面总结了其中几种方式。

静态模糊效果
  • 对于静态的模糊效果,最直接的方式就是加载做好的模糊图片
    动态模糊效果
  • 苹果原生控件:UIVisualEffectView
  • 苹果原生API:Core Image 的滤镜效果
  • 苹果原生API:vImage
  • 使用第三方工具GPUImage
  • 使用第三方工具FXBlurView

一、苹果原生控件:UIVisualEffectView实现模糊效果

  • UIVisualEffectView是iOS8的新特性,该控件主要用于为原有的控件增加模糊效果。
  • 由于是iOS8的新特性,所以具有一定的局限性。
  • UIVisualEffectView继承自UIView,没有继承UIControl,所以只能做静态控件使用。
  • 控制UIVisualEffectView控件模糊效果的属性时effect只读属性,该属性的类型是UIVisualEffect,该类型有两个子类:UIBlurEffectUIVibrancyEffect
  • UIBlurEffect允许应用程序中动态的创建实时的模糊效果;UIVibrancyEffect允许在模糊效果上“写字”。
  • Blur Style有三种效果:
    • UIBlurEffectStyleLight:白色的模糊效果。
    • UIBlurEffectStyleExtraLight:极亮的白色模糊效果。
    • UIBlurEffectStyleDark:暗色的模糊效果。
  • 可以通过在Interface Bulider中将UIVibrancyEffect控件直接拖入某个控件内添加模糊效果,也可以通过纯代码的形式创建和添加。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// UIBlurEffectStyleLight模式
UIVisualEffectView *lightView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
lightView.frame = CGRectMake(40, 40, 300, 100);
[self.imageView addSubview:lightView];

// UIBlurEffectStyleExtraLight模式
UIVisualEffectView *extraLightView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight]];
extraLightView.frame = CGRectMake(40, 160, 300, 100);
[self.imageView addSubview:extraLightView];

// UIBlurEffectStyleDark
UIVisualEffectView *darkView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleDark]];
darkView.frame = CGRectMake(40, 280, 300, 100);
[self.imageView addSubview:darkView];


二、Core Image 的滤镜效果实现模糊效果

  • 在iOS5.0之后Core Image 的API提供了大量的滤镜(Filter)效果。
  • 利用Core Image 实现模糊效果非常简单,只需要10行左右的代码就能搞定。
  • 使用Core Image 设置模糊之后,会在周围产生白边
  • 代码中的CIGaussianBlur是一个滤镜名称,更多的滤镜可以参考苹果滤镜列表
  • Core Image实现高斯模糊的原理是:将原来的图片惊醒模糊处理返回渲染后的一整张图片,比较消耗CPU性能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/**
* 使用Core Image进行模糊
*/
- (UIImage *)blurryImage:(UIImage *)image withblurLevel:(CGFloat)blur{

// 1.创建CIImage
CIImage * ciImage = [[CIImage alloc]initWithImage:image];

// 2.添加滤镜
CIFilter * blurFilter = [CIFilter filterWithName:@"CIGaussianBlur"];

// 3.将图片输入到滤镜中
[blurFilter setValue:ciImage forKey:kCIInputImageKey];

// 4.设置模糊值(不模糊为0,模糊最大为100)
[blurFilter setValue:[NSNumber numberWithFloat:blur] forKey:@"inputRadius"];

// 5.将处理好的图片输出
CIImage * outCiImage = [blurFilter valueForKey:kCIOutputImageKey];

// 6.生成图片 CIContext(CIImage的操作句柄)nil表示默认有CPU渲染图片(如果让GPU渲染提高效率,则应设置contextWithOptions的字典数据)
CIContext * context = [CIContext contextWithOptions:nil];

// 7.获取CIImage句柄
CGImageRef outCGImage = [context createCGImage:outCiImage fromRect:[outCiImage extent]];

// 8.最终获取到图片
UIImage * blurImage = [UIImage imageWithCGImage:outCGImage];

// 9.释放句柄
CGImageRelease(outCGImage);

return blurImage;
}

Core Image实现高斯模糊


三、使用vImage实现高斯模糊

  • vImage属于Accelerate.Framework,所以在使用是需要导入Accelerate头文件,导入头文件代码:#import <Accelerate/Accelerate.h>
  • Accelerate主要用来做数图像处理、字信号处理相关的向量、矩阵运算的库。
  • 图像可以认为是由向量后者矩阵数据构成的。
  • Accelerate提供了搞笑的数学运算API,所以能对图像做各种各样的处理。
  • Accelerate实现高斯模糊的原理是:将原来的图片惊醒模糊处理返回渲染后的一整张图片,比较消耗CPU。
  • 模糊算法使用的函数是:vImageBoxConvolve_ARGB8888
    代码
    (记得先导入头文件#import <Accelerate/Accelerate.h>)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    /**
    * 使用vImage实现模糊效果
    */
    - (UIImage *)blurryImage:(UIImage *)image withblur:(CGFloat)blur{

    if (blur < 0.f || blur > 1.0f) blur = 0.5f;

    int boxSize = (int)(blur * 100);
    boxSize -=(boxSize % 2) + 1;

    // 图像处理
    CGImageRef img = image.CGImage;

    // 输入缓存 输出缓存
    vImage_Buffer inBuffer,outBuffer;

    vImage_Error error;

    // 像素缓存
    void * pixelBuffer;

    //数据源提供者,Defines an opaque type that supplies Quartz with data.
    CGDataProviderRef inProvider = CGImageGetDataProvider(img);
    // provider’s data.
    CFDataRef inBitmapData = CGDataProviderCopyData(inProvider);

    //宽,高,字节/行,data
    inBuffer.width = CGImageGetWidth(img);
    inBuffer.height = CGImageGetHeight(img);
    inBuffer.rowBytes = CGImageGetBytesPerRow(img);
    inBuffer.data = (void*)CFDataGetBytePtr(inBitmapData);

    //像数缓存,字节行*图片高
    pixelBuffer = malloc(CGImageGetBytesPerRow(img) * CGImageGetHeight(img));
    outBuffer.data = pixelBuffer;
    outBuffer.width = CGImageGetWidth(img);
    outBuffer.height = CGImageGetHeight(img);
    outBuffer.rowBytes = CGImageGetBytesPerRow(img);

    // 第三个中间的缓存区,抗锯齿的效果
    void *pixelBuffer2 = malloc(CGImageGetBytesPerRow(img) * CGImageGetHeight(img));
    vImage_Buffer outBuffer2;
    outBuffer2.data = pixelBuffer2;
    outBuffer2.width = CGImageGetWidth(img);
    outBuffer2.height = CGImageGetHeight(img);
    outBuffer2.rowBytes = CGImageGetBytesPerRow(img);
    //Convolves a region of interest within an ARGB8888 source image by an implicit M x N kernel that has the effect of a box filter.
    error = vImageBoxConvolve_ARGB8888(&inBuffer, &outBuffer2, NULL, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend);
    error = vImageBoxConvolve_ARGB8888(&outBuffer2, &inBuffer, NULL, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend);
    error = vImageBoxConvolve_ARGB8888(&inBuffer, &outBuffer, NULL, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend);

    if (error) NSLog(@"error from convolution %ld", error);

    // NSLog(@"字节组成部分:%zu",CGImageGetBitsPerComponent(img));

    //颜色空间DeviceRGB
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    //用图片创建上下文,CGImageGetBitsPerComponent(img),7,8
    CGContextRef ctx = CGBitmapContextCreate(
    outBuffer.data,
    outBuffer.width,
    outBuffer.height,
    8,
    outBuffer.rowBytes,
    colorSpace,
    CGImageGetBitmapInfo(image.CGImage));

    //根据上下文,处理过的图片,重新组件
    CGImageRef imageRef = CGBitmapContextCreateImage (ctx);
    UIImage * outImage = [UIImage imageWithCGImage:imageRef];

    //clean up
    CGContextRelease(ctx);
    CGColorSpaceRelease(colorSpace);
    free(pixelBuffer);
    free(pixelBuffer2);
    CFRelease(inBitmapData);

    //CGColorSpaceRelease(colorSpace); //多余的释放

    // 释放句柄
    CGImageRelease(imageRef);

    return outImage;
    }

使用vImage实现高斯模糊


四、使用第三方工具GPUImage实现高斯模糊

  • GPUImage一个基于GPU图像和视频处理的开源框架,适用面广。
  • GPUImage同时支持objective-C和Swift。
  • GPUImage的github地址GPUImage
  • GPUImage可以直接导入本地,也可以使用使用pod导入。这是使用pod比较简单。
  • 使用GPUImage实现高斯模糊的代码非常简单.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /**
    *使用GPUImage实现高斯模糊
    */
    - (UIImage *)blurryGPUImage:(UIImage *)image withBlurLevel:(CGFloat)blur{

    GPUImageGaussianBlurFilter * blurFilter = [[GPUImageGaussianBlurFilter alloc]init];
    blurFilter.blurRadiusInPixels = blur;
    UIImage * blurImage = [blurFilter imageByFilteringImage:image];

    return blurImage;
    }

使用第三方工具GPUImage实现高斯模糊


五、 使用第三方工具FXBlurView实现高斯模糊

  • FXBlurViewUIView的子类,支持iOS5.0及其以上
  • FXBlurView的特点是简单和轻快,看源码就知道几行代码就可以搞定。
  • FXBlurView有两种模式:static静态模糊,也就是只模糊一次,就算背景图片改变了模糊效果也不会改变;dynamic动态模糊,也就是会实时的对背景图片进行模糊,是会不断变化的。
  • FXBlurView同样也可以通过pod导入。
  • FXBlurView的原理是在图片上添加一个FXBlurView的对象覆盖原图。
    1
    2
    3
    4
    5
    6
    7
    8
    // 设置模糊效果
    FXBlurView * blurView = [[FXBlurView alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 200)];
    blurView.backgroundColor = [UIColor whiteColor];

    // 设置模式
    blurView.dynamic = YES;
    // 设置模糊半径
    blurView.blurRadius = 10.0;

使用第三方工具FXBlurView实现高斯模糊