iOS效果—模糊效果汇总(转）

http://www.jianshu.com/p/6a1489c1e549

第一部分CoreImage效果

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

介绍

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

1. CoreImage框架

CoreImage框架中最基本代表图像的对象。保存图像数据的类，可以通过UIImage，图像文件或者像素数据创建。创建类方法如下：

imageWithContentsOfURL: 
imageWithData:imageWithCGImage:
imageWithCVPixelBuffer:

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

效果如下:

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;
        });

    });

第二部分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，也可能会导致许多效果显示不正确或者根本不显示。

效果如下

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和纯代码)

屏幕快照 2016-08-12 上午10.40.44.png

第三部分

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

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"]];
}

第四部分

UIView的子类FXBlurView, 来实现模糊效果

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];

}

第五部分

效果图如下:

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