美文网首页iOS技术iOS
iOS 图片模糊效果

iOS 图片模糊效果

作者: Frank_chun | 来源:发表于2016-04-18 15:58 被阅读3589次

    1.使用CoreImage中的模糊滤镜原始效果图如下: 这里写图片描述 CoreImage的实现:

    - (void)viewDidLoad { 
    [super viewDidLoad]; 
    UIImage * image = [UIImage imageNamed:@"icon"]; 
     /*..CoreImage中的模糊效果滤镜..*/ 
     //CIImage,相当于UIImage,作用为获取图片资源 
    CIImage * ciImage = [[CIImage alloc]initWithImage:image ]; 
    //CIFilter,高斯模糊滤镜
     CIFilter * blurFilter = [CIFilter filterWithName:@"CIGaussianBlur"]; 
     //将图片输入到滤镜中 
    [blurFilter setValue:ciImage forKey:kCIInputImageKey];  
    //用来查询滤镜可以设置的参数以及一些相关的信息 
    NSLog(@"%@",[blurFilter attributes]);  
    //设置模糊程度,默认为10,取值范围(0-100) 
    [blurFilter setValue:@(20) forKey:@"inputRadius"];  
    //将处理好的图片输出
     CIImage * outCiImage = [blurFilter valueForKey:kCIOutputImageKey];  
    //CIContext 
    CIContext * context = [CIContext contextWithOptions:nil];  
    //获取CGImage句柄,也就是从数据流中取出图片
     CGImageRef outCGImage = [context createCGImage:outCiImage fromRect:[outCiImage extent]];  
    //最终获取到图片
     UIImage * blurImage = [UIImage imageWithCGImage:outCGImage];  
    //释放CGImage句柄 
    CGImageRelease(outCGImage); 
     UIImageView * imageView = [[UIImageView alloc]initWithFrame:self.view.bounds]; imageView.image = blurImage; [self.view addSubview:imageView];
    }
    
    [blurFilter attributes]打印结果如下:
    //参数以及一些相关的信息,如果不做任何的设置,默认程度为10( CIAttributeDefault = 10);
    { 
    "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;
     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;
     CIAttributeSliderMin = 0;
     CIAttributeType = CIAttributeTypeScalar; 
    };
    }```
    默认程度为10效果图如下:![这里写图片描述](http:https://img.haomeiwen.com/i1485325/cc76711e082f0adf?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 默认程度为50效果图如下:![这里写图片描述](https://img.haomeiwen.com/i1485325/d7bb4a6c24460d6b?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
     #### 2.使用UIImage+ImageEffects
    到该地址下载:https://github.com/YouXianMing/UIImageBlur,里面还有很多好东西,值得关注;
    导入UIImage+ImageEffects文件到工程中即可使用;
    UIImage+ImageEffects的实现:
    

    UIImage * image = [UIImage imageNamed:@"icon"];
    //模糊效果渲染耗费时间,建议在子线程中渲染
    //对图片进行模糊
    UIImage * blurImage = [image blurImage];
    //设置模糊度
    UIImage * blurImage1 = [image blurImageWithRadius:10];
    //设置局部模糊度
    UIImage * blurImage2 = [image blurImageAtFrame:CGRectMake(0, 0, image.size.width, image.size.height/2)];
    //灰度效果
    UIImage * blurImage3 = [image grayScale];
    /*其他的一些方法,可以自己尝试使用
    //固定宽度与固定高度

    • (UIImage *)scaleWithFixedWidth:(CGFloat)width;
    • (UIImage *)scaleWithFixedHeight:(CGFloat)height;
      //平均的颜色
    • (UIColor *)averageColor;
      //裁剪图片的一部分
    • (UIImage *)croppedImageAtFrame:(CGRect)frame;
      */
      UIImageView * imageView = [[UIImageView alloc]initWithFrame:self.view.bounds]; imageView.image = blurImage; [self.view addSubview:imageView];
    效果图分别如下:![这里写图片描述](http:https://img.haomeiwen.com/i1485325/b12d3ce7472c76ac?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 
    //局部模糊![这里写图片描述](https://img.haomeiwen.com/i1485325/93df8f7fcf05914d?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    //灰色![这里写图片描述](http:https://img.haomeiwen.com/i1485325/a451ee652ba02b89?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    #### 3.使用UIVisualEffectView
    注意:UIVisualEffectView只适用用户iOS 8或以上,才可以使用8以下则不能使用;
    UIVisualEffectView的实现:
    1.直接将文本内容加在effectView(该情况下的文本内容不能与背景相符应);
    

    UIImage * image = [UIImage imageNamed:@"icon"];
    UIImageView * imageView = [[UIImageView alloc]initWithFrame:self.view.bounds]; imageView.image = image;
    [self.view addSubview:imageView];
    UIBlurEffect * blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    //创建模糊view
    UIVisualEffectView * effectView = [[UIVisualEffectView alloc]initWithEffect:blur];
    effectView.frame = CGRectMake(0, 250, imageView.frame.size.width, 200);
    [imageView addSubview:effectView];
    //添加显示文本
    UILabel * lable = [[UILabel alloc]initWithFrame:effectView.bounds];
    lable.text = @"哈哈哈哈哈";
    lable.textAlignment = NSTextAlignmentCenter;
    lable.font = [UIFont systemFontOfSize:24];
    [effectView.contentView addSubview:lable];

    效果图如下:![这里写图片描述](http:https://img.haomeiwen.com/i1485325/54bee101c7ac7010?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
     2.加在effectView的子view中使文本与背景相符应;
    

    UIImage * image = [UIImage imageNamed:@"icon"];
    UIImageView * imageView = [[UIImageView alloc]initWithFrame:self.view.bounds]; imageView.image = image; [self.view addSubview:imageView];
    UIBlurEffect * blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    //创建模糊view
    UIVisualEffectView * effectView = [[UIVisualEffectView alloc]initWithEffect:blur];
    effectView.frame = CGRectMake(0, 250, imageView.frame.size.width, 200);
    [imageView addSubview:effectView];
    //添加显示文本
    UILabel * lable = [[UILabel alloc]initWithFrame:effectView.bounds];
    lable.text = @"哈哈哈哈哈";
    lable.textAlignment = NSTextAlignmentCenter;
    lable.font = [UIFont systemFontOfSize:24];
    //创建模糊子view的UIVisualEffectView
    //1.创建出子模糊view
    UIVisualEffectView * subEffectView = [[UIVisualEffectView alloc]initWithEffect:[UIVibrancyEffect effectForBlurEffect:(UIBlurEffect *)effectView.effect]];
    //2.设定尺寸
    subEffectView.frame = effectView.bounds;
    //3.将子模糊view添加到effectView的contentView才能够生效
    [effectView.contentView addSubview:subEffectView];
    //4.添加要显示的view来达到特殊的效果
    [subEffectView.contentView addSubview:lable];

    效果图如下:![这里写图片描述](http:https://img.haomeiwen.com/i1485325/f6f2a722e7e51bc4?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
     #### 4.下载图片后自动模糊效果
    在项目中导入UIImage+ImageEffects和GCD文件;
    UIImage+ImageEffects地址:https://github.com/YouXianMing/UIImageBlur;
    GCD地址:https://github.com/YouXianMing/GCD-Program;
    代码的实现:
    创建一个UIView的子类,命名为BlurDownloadPicView;
    BlurDownloadPicView.h的里面内容:
    
    

    import <UIKit/UIKit.h>@interface BlurDownloadPicView : UIView

    //图片下载地址
    @property (nonatomic, strong)NSString * picUrl;
    //图片显示的方式
    @property (nonatomic)UIViewContentMode contentMode;
    //开始执行

    • (void)startProgress;
      @end
    BlurDownloadPicView.m的里面内容:
    

    import "BlurDownloadPicView.h"

    import "GCD.h"

    import "UIImage+ImageEffects.h"

    @interface BlurDownloadPicView ()
    @property (nonatomic, strong)UIImageView * imageView;
    @end
    @implementation BlurDownloadPicView

    • (instancetype)initWithFrame:(CGRect)frame{
      self = [super initWithFrame:frame];
      if (self) {
      [self loadSubViews];
      }
      return self;
      }
    • (void)loadSubViews{
      self.imageView = [[UIImageView alloc]initWithFrame:self.bounds];
      self.imageView.alpha = 0;
      [self addSubview:self.imageView];
      }
    • (void)startProgress{
      if (self.picUrl) {
      [GCDQueue executeInGlobalQueue:^{
      //创建请求
      NSURLRequest * request = [NSURLRequest requestWithURL:[NSURL URLWithString:self.picUrl]]; //因为是同步请求,会阻塞主线程(mainQueue)
      NSData * data = [NSURLConnection sendSynchronousRequest:request returningResponse:nil error:nil];
      //获取图片
      UIImage * image = [[UIImage alloc]initWithData:data];
      //对图片进行模糊,会阻塞主线程(mainQueue)
      UIImage * blurImage = [image blurImage];
      [GCDQueue executeInMainQueue:^{
      //加载图片
      self.imageView.image = blurImage;
      [UIView animateWithDuration:1 animations:^{
      self.imageView.alpha = 1;
      }];
      }];
      }];
      }
      }
      //重写set,get方法
      -(void)setContentMode:(UIViewContentMode)contentMode{
      self.contentMode = contentMode;
      self.imageView.contentMode = contentMode;
      }
    • (UIViewContentMode)contentMode{
      return self.contentMode;}
    在ViewController.m里面的实现;
    引入#import "BlurDownloadPicView.h"头文件
    

    在viewDidLoad里面的代码实现

    效果图如下:![这里写图片描述](https://img.haomeiwen.com/i1485325/6d0fc61a9677e700?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    相关文章

      网友评论

      本文标题:iOS 图片模糊效果

      本文链接:https://www.haomeiwen.com/subject/toralttx.html