iOS图片毛玻璃效果

效果图

1.png

Demo下载地址:VisualDemo,觉得不错还请给个star

前言

日常处理毛玻璃效果, 主要的用到就是这几种方式
1.iOS5.0之后就出现了Core Image的API。Core Image的API被放在CoreImage.framework库中。在iOS和OS X平台上，Core Image都提供了大量的滤镜（Filter），这也是Core Image库中比较核心的东西之一。按照官方文档记载，在OS X上有120多种Filter，而在iOS上也有90多种。
2.第三方框架GPUImage
3.iOS 7之前UIToolbar
4.iOS 8之后苹果新增加的一个类UIVisualEffectView
5.vImage也是苹果推出的一个库在Accelerate.framework框架中

下面就依次讲述这几种方式的实现

Core Image实现方式代码如下:

- (UIImage *)coreBlurImage:(UIImage *)image withBlurNumber:(CGFloat)blur{
    //获取绘制上下文
    CIContext *context = [CIContext contextWithOptions:nil];
    //获取CIImage
    CIImage *inputImage = [CIImage imageWithCGImage:image.CGImage];
    //创建滤镜对象 CIGaussianBlur:高斯模糊
    CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"];
    [filter setValue:inputImage forKey:kCIInputImageKey];
    //改变模糊效果值
    [filter setValue:@10.0f forKey:@"inputRadius"];
    //模糊图片渲染并输出CIImage
    CIImage *result = [filter valueForKey:kCIOutputImageKey];
    CGImageRef outImage = [context createCGImage:result fromRect:[result extent]];
    UIImage *blurImage = [UIImage imageWithCGImage:outImage];
    CGImageRelease(outImage);
    return blurImage;
}

CIGaussianBlur即是常用的高斯滤镜, Filter都是按字符串的名字去创建的, 详情见官方文档除了这里提到的多种Filter之外，Core Image还提供了CIDetector等类，可以支持人脸识别等，在OS X上Core Image也做了更多支持。

GPUImage

GPUImageGaussianBlurFilter * blurFilter = [[GPUImageGaussianBlurFilter alloc] init];
blurFilter.blurRadiusInPixels = 2.0;
UIImage * image = [UIImage imageNamed:@"xxx"];
UIImage *blurredImage = [blurFilter imageByFilteringImage:image];

代码上比使用Core Image的情况简单得多

上面2种都是比较耗性能的, 慎用

UIToolbar 简单易懂，但是效果单一，系统提供的样式也就UIBarStyleDefault和UIBarStyleBlack两种

   UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.view.bounds];
    imageView.image = [UIImage imageNamed:@"image"];
    imageView.contentMode = UIViewContentModeScaleAspectFill;
    imageView.layer.masksToBounds = YES;
    [self.view addSubview:imageView];
    
    /** UIBarStyle 毛玻璃的样式(枚举)
     *      UIBarStyleDefault          = 0,     // 浅色
     *      UIBarStyleBlack            = 1,     // 深色
     *      UIBarStyleBlackOpaque      = 1,     // Deprecated. Use UIBarStyleBlack
     *      UIBarStyleBlackTranslucent = 2,     // Deprecated. Use UIBarStyleBlack and set the translucent property to YES
     */
    UIToolbar * toolbar = [[UIToolbar alloc] initWithFrame:imageView.bounds];
    toolbar.barStyle = UIBarStyleBlack;
    toolbar.alpha = 0.9;
    [imageView addSubview:toolbar];

UIVisualEffectView : 比UIToolbar强大一点, 主要用到了这个类

• UIVisualEffect : 继承自UIView，可以看成是专门用于处理毛玻璃效果的视图。使用UIVisuaEffectView有一点需要特别注意，不要在UIVisuaEffectView实例化View上面直接添加subViews，应该将需要添加的子视图添加到其contentView上。同时，尽量避免将UIVisualEffectView对象的alpha值设置为小于1.0的值，因为创建半透明的视图会导致系统在离屏渲染时去对UIVisualEffectView对象及所有的相关的子视图做混合操作,比较消耗性能。
• UIBlurEffect : 使用该效果，会使得UIVisualEffectView下面的内容出现毛玻璃化
• UIVibrancyEffect : 生动效果, 该效果能够放大和调整放在UIVisualEffectView对象下面的内容的颜色
• UIVisualEffect：一个视觉效果抽象类，继承自NSObject，是UIBlurEffect和UIVibrancyEffect的父类

UIBlurEffect

    _imageView = [[UIImageView alloc] initWithFrame:self.view.bounds];
    _imageView.image = [UIImage imageNamed:@"image"];
    _imageView.contentMode = UIViewContentModeScaleAspectFill;
    _imageView.layer.masksToBounds = YES;
    [self.view addSubview:_imageView];
    /**  UIBlurEffect 毛玻璃的样式(枚举)
     * UIBlurEffectStyleExtraLight, // 极度白
     * UIBlurEffectStyleLight,      // 浅色
     * UIBlurEffectStyleDark        // 深色
     */
    
    UIBlurEffect * effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVisualEffectView * effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
    effectView.frame = CGRectMake(0, 100, self.view.bounds.size.width, 200);
    [_imageView addSubview:effectView];

UIVibrancyEffect

    UIBlurEffect * blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVibrancyEffect * vibrancy = [UIVibrancyEffect effectForBlurEffect:blurEffect];
    UIVisualEffectView * effectView = [[UIVisualEffectView alloc] initWithEffect:vibrancy];
    UIView *redView = [[UIView alloc]init];
    redView.backgroundColor = [UIColor blueColor];
    [effectView.contentView addSubview:redView];
    effectView.frame = CGRectMake(0, 310,375, 300);
    redView.frame = effectView.bounds;
    [self.view addSubview:effectView];

效果图:

3.png

运用UIBlurEffect是可逆的，我们可以去掉蒙层，显示图片

 [effectView removeFromSuperview];

vImage是Accelerate.framework框架中的这个framework主要是用来做数字信号处理、图像处理相关的向量、矩阵运算的库。首先导入#import <Accelerate/Accelerate.h>我们可以认为我们的图像都是由向量或者矩阵数据构成的，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;
}

总结:

以上就是几种常用的毛玻璃处理方式, 写的不好还请小伙伴们见谅!

参考文献:

iOS-毛玻璃效果详解
iOS 开发之模糊效果的五种实现