iOS中实现模糊效果(附带多种滤镜探索,你值得转载)

最新推荐文章于 2025-05-01 10:47:33 发布
最新推荐文章于 2025-05-01 10:47:33 发布
阅读量3.7k 收藏 1
点赞数 1
本文介绍两种iOS中实现模糊效果的方法：使用CoreImage框架和UIVisualEffectView组件。CoreImage提供了丰富的滤镜效果，如高斯模糊等；而UIVisualEffectView则在iOS8中引入，用于快速添加模糊背景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

转载:http://www.jianshu.com/p/63ba42ea8d41 然后进行二次加工

iOS中实现模糊效果

字数1403  阅读228  评论0 

iOS中实现模糊效果的方法有多种，本文介绍两种。

1. 使用CoreImage实现

CoreImage框架最早出现于iOS5,后期苹果又对这个框架进行了扩展。
CoreImage框架中的常用类： 

  1. CIImage：代表图片的对象。 
  2. CIFilter：代表滤镜的对象,通过key/value的方式设置参数。 
  3. CIContext：用来渲染CIImage 。 

下面我们来看看简单它的简单使用。

  1. 创建CIImage对象。

     - (CIImage *)ciImage
 {
     if (!_ciImage) {
         _ciImage = [[CIImage alloc]initWithImage:[UIImage imageNamed:@"image"]];
     }
     return _ciImage;
 }

  2. 创建CIFilter滤镜对象。

     - (CIFilter *)filter
 {
     if (!_filter) {
         //传入滤镜的名字即可使用类方法创建                
         _filter = [CIFilter filterWithName:@"CIGaussianBlur"];
     }
     return _filter;
 }

    现在的SDK中包含了很多种滤镜，那么我们怎么知道具体有哪些滤镜呢？又怎么知道每一种滤镜的具体用法呢？百度？谷歌？当然可以，但是还有另一种方法。
    我们从CIFilter的头文件中可以看到滤镜有很多种分类，名字都是以kCICategory...开头，我们可以通过CIFilter的类方法得到对应分类下的所有滤镜。以kCICategoryBuiltIn为例，获取这个分类下的滤镜：

     NSArray *filters = [CIFilter filterNamesInCategory:kCICategoryBuiltIn];
 NSLog(@"filters = %@",filters);
 //打印出来
 filters = (
     CIAccordionFoldTransition,
     CIAdditionCompositing,
     CIAffineClamp,
     CIAffineTile,
     CIAffineTransform,
     .....
 }

    选择好自己需要的滤镜之后，再通过查看滤镜的属性来了解它的用法。以高斯模糊滤镜为例：

     _filter = [CIFilter filterWithName:@"CIGaussianBlur"];
 NSLog(@"attribute = %@",[_filter attributes]);

    打印的结果

     attribute = {
     "CIAttributeFilterAvailable_Mac" = "10.4";
     "CIAttributeFilterAvailable_iOS" = 6;
     CIAttributeFilterCategories =     (
                                        CICategoryBlur,
                                        CICategoryStillImage,
                                        CICategoryVideo,
                                        CICategoryBuiltIn
                                        );
     CIAttributeFilterDisplayName = "Gaussian Blur";
     CIAttributeFilterName = CIGaussianBlur;
     CIAttributeReferenceDocumentation = "http://developer.apple.com/cgi-bin/apple_ref.cgi?apple_ref=//apple_ref/doc/filter/ci/CIGaussianBlur";
     inputImage =     {
         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 =     {
         CIAttributeClass = NSNumber;
         CIAttributeDefault = 10;    //默认模糊度为10
         CIAttributeDescription = "The radius determines how many pixels are used to create the blur. The larger the radius, the blurrier the result.";
         CIAttributeDisplayName = Radius;
         CIAttributeIdentity = 0;
         CIAttributeMin = 0;
         CIAttributeSliderMax = 100;    //最高模糊度100
         CIAttributeSliderMin = 0;     //最低模糊度0
         CIAttributeType = CIAttributeTypeScalar;
     };
 }

    大概说一下高斯模糊滤镜的属性，也是设置滤镜相关参数时的key：
    CIAttributeFilterAvailable_iOS：iOS最低可用系统版本。
    CIAttributeFilterCategories：该滤镜所属分类。
    inputImage：输入的图像为CIImage对象。
    inputRadius：模糊程度的参数，类型为NSNumber，默认模糊度为10，最低0，最高100。
    了解了这几个属性使用高斯模糊就没问题了。

  3. 创建CIContext对象。
    在iOS平台下创建CIContext的方式有多种，这里介绍两种。

    1. 创建基于CPU的CIContext对象:

       _context = [CIContext contextWithOptions:@{kCIContextUseSoftwareRenderer:@(YES)}];

    2. 创建基于GPU的CIContext对象。

       _context = [CIContext contextWithOptions:nil];

      采用基于GPU的CIContext将可以获得更好的性能，但是基于GPU创建的CIContext跨应用使用时会自动降为基于CPU的。比如，在进入相册选择相片的时候，如果在UIImagePickerControllerDelegate的代理方法中使用CIContext对象处理图像，系统就会把这个任务交给CPU做。

  4. 三个对象创建好之后就可以对图像做处理了。

     //设置滤镜输入的图像
 //注意：这里的key可以写kCIInputImageKey，也可以写@“inputImage”
 [self.filter setValue:self.ciImage forKey:kCIInputImageKey];
 //设置高斯模糊的模糊程度
 //这里的key可以写kCIInputRadiusKey，也可以写@“inputRadius”。
 [self.filter setValue:@(value) forKey:kCIInputRadiusKey];

 //得到处理后的图片
 CIImage *outImage = [self.filter valueForKey:kCIOutputImageKey];

 CGImageRef cgImage = [self.context createCGImage:outImage fromRect:[outImage extent]];
 //显示图片
 self.blurImage.image = [UIImage imageWithCGImage:cgImage];
 CGImageRelease(cgImage);

效果图如下


2. 使用UIVisualEffectView实现

UIVisualEffectView是iOS8开放的接口，使用比较简单。大概用法就是创建一个UIVisualEffectView的视图，将其放于需要添加blur效果的视图上面即可。
我们举个例子来看看UIVisualEffectView的简单使用。

UIImage *image = [UIImage imageNamed:@"1.jpg"];
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, image.size.width, image.size.height)];
imageView.image = image;
[scrollView addSubview:imageView];
scrollView.contentSize = image.size;

//blurView
UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];
UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc]initWithEffect:blurEffect];
visualEffectView.frame = CGRectMake(0, 0, self.view.frame.size.width, 300);
[self.view addSubview:visualEffectView];

这段代码在scorllView上添加了一张大图，然后在scrollView上添加了一个blur效果视图。可以看出UIVisualEffectView的使用方法还是很简单的。 

  1. UIVisualEffectView初始化的时候需要以一个UIVisualEffect对象为参数，但是通过查看它的头文件发现它并没有除继承自NSObject之外的属性和方法。但是它又两个子类UIBlurEffect和UIVibrancyEffect,我们可以传入这两个子类的对象来初始化UIVisualEffectView。 
  2. UIBlurEffect：看其名字就知道它是用来实现模糊效果的。创建的模糊效果有三种风格： 
UIBlurEffectStyleExtraLight,
UIBlurEffectStyleLight,
UIBlurEffectStyleDark

3.UIVibrancyEffect:主要用于让处于UIVisualEffectView上的内容看起来更加生动，它需要和UIBlurEffect一起使用。接上面的代码，我们在blur视图上面添加一张图片，并让图片显示也会有特殊效果，如下代码：

//创建UIVibrancyEffect对象
UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];
UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc]initWithEffect:vibrancyEffect];
vibrancyEffectView.frame = visualEffectView.bounds;
//将有UIVibrancyEffect效果的视图添加到visualEffectView.contentView上
[visualEffectView.contentView addSubview:vibrancyEffectView];
//添加图片    
UIImage *logoImage = [UIImage imageNamed:@"logo"];
UIImageView *logo = [[UIImageView alloc]initWithImage:logoImage];
logo.frame = CGRectMake(0, 0, logoImage.size.width, logoImage.size.height);
logo.center = visualEffectView.center;
[vibrancyEffectView.contentView addSubview:logo];

效果图如下：



<span style="font-size:12px;">/**
 *  滤镜
 */
- (CIFilter *)filter
{
    if (!_filter) {
        //查看某个分类下的所有滤镜
        NSArray *filters = [CIFilter filterNamesInCategory:kCICategoryBuiltIn];
        NSLog(@"filters = %@",filters);
        
        _filter = [CIFilter filterWithName:@"CIColorClamp"];
        //        //再通过打印该滤镜的详细信息来查看它的用法
        NSLog(@"attribute = %@",[_filter attributes]);
    }
    return _filter;
}

- (void)sliderValueChange:(UISlider *)slider
{
    CGFloat value = slider.value/100;
    //设置滤镜参数
    [self.filter setValue:self.ciImage forKey:kCIInputImageKey];
    CIVector*v=[[CIVector alloc]initWithCGRect:CGRectMake(value, value, value, value)
                ];
    [self.filter setValue:v forKey:@"inputMaxComponents"];
    

    //得到处理后的图片
    CIImage *outImage = [self.filter valueForKey:kCIOutputImageKey];
    
    CGImageRef cgImage = [self.context createCGImage:outImage fromRect:[outImage extent]];

    self.blurImage.image = [UIImage imageWithCGImage:cgImage];
    CGImageRelease(cgImage);

}
</span>

运行结果 

/**
 *  滤镜
 */
- (CIFilter *)filter
{
    if (!_filter) {
        //查看某个分类下的所有滤镜
        NSArray *filters = [CIFilter filterNamesInCategory:kCICategoryBuiltIn];
        NSLog(@"filters = %@",filters);
        
        _filter = [CIFilter filterWithName:@"CICircularWrap"];
        //        //再通过打印该滤镜的详细信息来查看它的用法
        NSLog(@"attribute = %@",[_filter attributes]);
    }
    return _filter;
}
- (void)sliderValueChange:(UISlider *)slider
{
    CGFloat value = slider.value*6;
    //设置滤镜参数
    [self.filter setValue:self.ciImage forKey:kCIInputImageKey];
    [self.filter setValue:@(value) forKey:kCIInputRadiusKey];
    
    [self.filter setValue:@(value/600*3.14) forKey:kCIInputAngleKey];

    //得到处理后的图片
    CIImage *outImage = [self.filter valueForKey:kCIOutputImageKey];
    
    CGImageRef cgImage = [self.context createCGImage:outImage fromRect:[outImage extent]];

    self.blurImage.image = [UIImage imageWithCGImage:cgImage];
    CGImageRelease(cgImage);
}

运行结果 

/**
 *  滤镜
 */
- (CIFilter *)filter
{
    if (!_filter) {
        //查看某个分类下的所有滤镜
        NSArray *filters = [CIFilter filterNamesInCategory:kCICategoryBuiltIn];
        NSLog(@"filters = %@",filters);
        
        _filter = [CIFilter filterWithName:@"CILineOverlay"];
        //        //再通过打印该滤镜的详细信息来查看它的用法
        NSLog(@"attribute = %@",[_filter attributes]);
    }
    return _filter;
}
- (void)sliderValueChange:(UISlider *)slider
{
    CGFloat value = slider.value/1000;
    //设置滤镜参数
    [self.filter setValue:self.ciImage forKey:kCIInputImageKey];
    [self.filter setValue:@(value) forKey:@"inputThreshold"];
    

    //得到处理后的图片
    CIImage *outImage = self.filter.outputImage;
    
    CGImageRef cgImage = [self.context createCGImage:outImage fromRect:[outImage extent]];

    self.blurImage.image = [UIImage imageWithCGImage:cgImage];
    CGImageRelease(cgImage);
}

运行结果: 

/**
 *  滤镜
 */
- (CIFilter *)filter
{
    if (!_filter) {
        //查看某个分类下的所有滤镜
        NSArray *filters = [CIFilter filterNamesInCategory:kCICategoryBuiltIn];
        NSLog(@"filters = %@",filters);
        
        _filter = [CIFilter filterWithName:@"CIBarsSwipeTransition"];
        //        //再通过打印该滤镜的详细信息来查看它的用法
        NSLog(@"attribute = %@",[_filter attributes]);
    }
    return _filter;
}
- (void)sliderValueChange:(UISlider *)slider
{
    CGFloat value = slider.value/100;
    //设置滤镜参数
    [self.filter setValue:self.ciImage forKey:kCIInputImageKey];
    [self.filter setValue:@(value) forKey:kCIInputTimeKey];
    [self.filter setValue:@(value*100*3+2) forKey:kCIInputWidthKey];

    //得到处理后的图片
    CIImage *outImage = self.filter.outputImage;
    
    CGImageRef cgImage = [self.context createCGImage:outImage fromRect:[outImage extent]];

    self.blurImage.image = [UIImage imageWithCGImage:cgImage];
    CGImageRelease(cgImage);
}

运行结果 

/**
 *  滤镜
 */
- (CIFilter *)filter
{
    if (!_filter) {
        //查看某个分类下的所有滤镜
        NSArray *filters = [CIFilter filterNamesInCategory:kCICategoryBuiltIn];
        NSLog(@"filters = %@",filters);
        
        _filter = [CIFilter filterWithName:@"CIBloom"];
        //        //再通过打印该滤镜的详细信息来查看它的用法
        NSLog(@"attribute = %@",[_filter attributes]);
    }
    return _filter;
}
- (void)sliderValueChange:(UISlider *)slider
{
    CGFloat value = slider.value;
    //设置滤镜参数
    [self.filter setValue:self.ciImage forKey:kCIInputImageKey];
    [self.filter setValue:@(value) forKey:kCIInputRadiusKey];
    [self.filter setValue:@(value/100) forKey:kCIInputIntensityKey];

    //得到处理后的图片
    CIImage *outImage = self.filter.outputImage;
    
    CGImageRef cgImage = [self.context createCGImage:outImage fromRect:[outImage extent]];

    self.blurImage.image = [UIImage imageWithCGImage:cgImage];
    CGImageRelease(cgImage);
}


如果你愿意探索,127中滤镜都在你手中


本文Demo

CoreImage推荐阅读：使用coreImage滤镜 
UIVisualEffectView推荐阅读：
使用UIVisualEffectView为视图添加特殊效果
iOS 8 UIVisualEffectView(注：日语写的，不过看看例子不错)


    iOS 图片背景模糊效果
    zhouwenchun
    04-18 8398
    1.使用CoreImage中的模糊滤镜原始效果图如下: CoreImage的实现:- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. UIImage * image = [UIImage imageN
    iOS实现模糊效果
    ITMan_iOS的专栏
    03-20 677
    imageview = [[UIImageView alloc] initWithFrame:CGRectMake(0, 20,200, 200)]; imageview.contentMode = UIViewContentModeScaleAspectFit; imageview.userInteractionEnabled = YES; [self.view addSubview:
    浅谈iOS模糊效果
    weixin_34228387的博客
    04-07 240
    前言 今年过年微信客户端临时出现了一个非常有意思的功能，好友发出带了一层蒙层的照片，发指定金额的红包即可看到清晰相片，今天我们就解开这个神秘的技术面纱。 实现技术汇总 官方： CoreImage(很早就出现的技术，缺点是转化效率低) UIBlurEffect（iOS8以后出现的新技术，效率比上面的要好，并且简单...
    动态实现iOS背景高斯模糊效果教程
    最新发布
    weixin_33173126的博客
    05-01 1276
    Core Image是Apple提供的一套功能强大的图像处理API，它允许开发者在不牺牲性能的情况下，应用各种高级图像处理技术。Core Image框架的核心概念包括图像处理管道（filter pipelines）、图像源（image sources）、滤镜（filters）、内核（kernels）和缓存（caching）。在使用Core Image时，开发者会频繁与以下几种组件打交道：CIImage：代表图像本身，所有的图像处理都是在CIImage对象上进行。CIFilter。
    iOS 实现图片高斯模糊效果
    liubo的博客
    08-08 2847
    将 bgEffectView 盖到imageview上面即可。用到了 UIVisualEffectView。
    【iOS】高斯模糊
    huangruiz1的博客
    10-19 965
    UIImageView *bgImg = [[UIImageView alloc]initWithFrame:CGRectMake(0, 20, SCREEN_WIDTH, 187)]; bgImg.image = [UIImage imageNamed:@"启动图标最终版"]; bgImg.contentMode = UIViewContentModeScaleAspectFill; bgImg.clipsToBounds = YES; [self.view addSubview:bgImg]; UIBl
    免费下载IOS风格模糊背景PPT模板
    本例中的“模糊PPT背景图片”即是通过一种“非常模糊朦胧的滤镜炫彩效果”来实现的，以达到类似于iOS风格的界面视觉效果。 3. 图片颜色的选取与搭配 在PPT背景图片设计中，颜色的选取与搭配至关重要。恰当的颜色...
    iOS 14 CIDepthBlurEffect漏洞分析与演示
    根据以上知识点，我们可以总结出，本文件描述的是在iOS 14系统中，当使用iPhone 12 Pro和12 Pro Max拍摄的图片尝试实现基于深度信息的模糊效果时，CIDepthBlurEffect功能出现的异常表现。开发者在使用CIContext初始...
    iOS开发常用基础框架(你了解的ios只是冰山一角)
    hzdg360的博客
    02-22 3559
    框架名称及功能 Foundation 提供OC的基础类（像NSObject）、基本数据类型等 UIKit 创建和管理应用程序的用户界面 QuartzCore 提供动画特效以及通过硬件进行渲染的能力 CoreGraphics 提供2D绘制的基于C的API SystemConfiguration 检
    iOS开源项目大全(一)(整理自网络)
    陈凯昂的博客
    12-11 1408
    第一部分 1. AFNetworking 在众多iOS开源项目中，AFNetworking可以称得上是最受开发者欢迎的库项目。AFNetworking是一个轻量级的iOS、Mac OS X网络通信类库，现在是GitHub上第三大Objective-C库。它建立在NSURLConnection、NSOperation等类库的基础上，让很多网络通信功能的实现变得十分简单，因此，许多iOS应
    swift-AGImageControls一个用于图像处理的工具
    08-15
    Swift-AGImageControls是一个专为图像处理设计的工具，它为开发者提供了丰富的功能，使得在iOS应用中实现图像编辑和视觉效果变得更加简单。这个库利用了Swift的强大性能和易用性，为用户提供了一系列自定义控制，...
    iOS模糊效果的实现方法
    08-31
    主要为大家详细介绍了iOS模糊效果的实现方法，利用系统的CoreImage滤镜、UIImage ImageEffects分类和UIVisualEffectView实现模糊效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    iOS实现背景高斯模糊效果
    08-31
    主要介绍了iOS实现背景高斯模糊效果，代码简单易懂，非常不错，需要的朋友参考下吧
    ios 高斯模糊
    杨永福
    11-12 666
    object－c （高斯模糊效果）  UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [[UIScreen mainScreen] bounds].size.width, 100)];          imageView.image = [UIImage imageNamed:@"
    iOS8中用UIVisualEffectView实现高斯模糊视图(毛玻璃效果)
    热门推荐
    Secret Island
    11-02 2万+
    在需要模糊的UIView上，添加一个UIVisualEffectView对象即可。 效果如下图： 代码如下：     UIImageView *imageview = [[UIImageView alloc] init];     imageview.frame = CGRectMake(10, 100, 300, 3
    iOS动画图层 — iOS模糊效果
    henanzhg的博客
    02-29 1050
    在iOS平台下，如果需要对UIImageView中的图片进行简单的模糊处理，可以使用自带的API进行处理。      CoreImage是苹果用来简化图片处理的框架。      首先我们将一张图片显示到UIImageView中，效果如下：            下面的代码片段可以实现图片的模糊效果 //CIImage CIImage *ciImage = [[CIImage allo
    iOS自带实现高斯模糊效果
    Minecraft
    06-03 1万+
    iOS原生支持实现毛玻璃效果的两种方法
    iOS图片模糊效果
    tyuersunshine的博客
    05-30 444
    在开发中，有时候我们可能会做一些图片模糊的效果，来给APP添加色彩。自己看到一个APP的模糊效果，感觉很不错，所以就学了下如何来实现这样一个模糊效果，写下来方便自己回顾，有需要的童鞋也可以get下，还包含一个截屏功能哦~ 先看效果图： 此处为效果图 因为只是显示一个小功能，所以我都写在了ViewController文件里，要开发具备这个效果的App的童鞋最好单独抽出一个类来实现这个功能。
    评论 1
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值