iOS 图片背景模糊效果

iOS 图片背景模糊效果

1.使用CoreImage中的模糊滤镜

原始效果图如下:

CoreImage的实现:

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    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效果图如下: 
 
默认程度为50效果图如下: 

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

效果图分别如下: 

//局部模糊

//灰色

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

效果图如下: 

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

效果图如下: 

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里面的代码实现
- (void)viewDidLoad {
    [super viewDidLoad];
  NSString * picUrl = @"http://i4.download.fd.pchome.net/g1/M00/0D/1C/oYYBAFTEeAmIWRXgAAKhY5iKdP8AACP_QP4y0IAAqF7878.jpg";

    BlurDownloadPicView * blurPicView = [[BlurDownloadPicView alloc]initWithFrame:self.view.bounds];
    [self.view addSubview:blurPicView];
    blurPicView.picUrl = picUrl;
    [blurPicView startProgress];
}

效果图如下: 

时间： 2024-11-03 20:44:59

iOS 图片背景模糊效果的相关文章

iOS图片模糊效果

加入  CoreImage.framework  CoreGraphic.framework 等库 在使用时引入:#import <Accelerate/Accelerate.h> ,支持iOS 5.0 及以上. -(void)show { UIImage* img = [self getBlurImage:[UIImage imageNamed:@"Default-568h.png"]]; [_bgImageView setImage:img]; } -(UIImage*

IOS图片拉伸技巧

IOS 图片拉伸技巧 对于有些图标等按钮 在美工设计的按钮下可以通过拉伸效果处理所需效果,最熟悉的莫过于微信聊天的 椭圆背景,也是通过这个这个原理进行背景图片.  如对该图片拉伸,如何操作? 首先找到要拉伸的部分,很明显 两侧椭圆是不变 要拉伸的是中间部分,如何指定中间部位,先看下图 指定这4个宽度后 会形成黑色模块 直白点就是 这块内容就是拉伸后中间那块不断填充的部分 具体代码: 1 UIImage* img=[UIImage imageNamed:@"2.png"];//原图2 U

ios图片拉伸

 button.png,尺寸为:24x60 现在我们把它用作为按钮背景,按钮尺寸是150x50: // 得到view的尺寸 CGSize viewSize = self.view.bounds.size; // 初始化按钮 UIButton *button = [[UIButton alloc] init]; // 设置尺寸 button.bounds = CGRectMake(0, 0, 150, 50); // 设置位置 button.center = CGPointMake(viewSiz

IOS从背景图中取色

?1. [代码][其他]代码     void *bitmapData; //内存空间的指针,该内存空间的大小等于图像使用RGB通道所占用的字节数. static CGContextRef CreateRGBABitmapContext (CGImageRef inImage){CGContextRef context = NULL;CGColorSpaceRef colorSpace;int bitmapByteCount;int bitmapBytesPerRow;    size_t pi

大屏iPhone的适配 +iOS 图片尺寸要求

摘自:http://blog.ibireme.com/2014/09/16/adapted_to_iphone6/ 苹果公司官网设计介绍到:Retina显示屏的超高像素密度已超过人眼能分辨的范围.Retina对图像设计(图标.启动画面和其它所有像素有关的东西)有什么影响呢?如果我们的app要支持Retina,就要提供高分辨率的(宽x2,高x2)的图片.同时,为了支持没有Retina的设备,仍旧要准备低分辨率的版本. 换言之,我们要准备两套设计图. 针对不同分辨率的图片,苹果规定了一个命名规范:假

iOS 图片

一.图片加载的工作流 概括来说,从磁盘中加载一张图片,并将它显示到屏幕上,中间的主要工作流如下: 假设我们使用 +imageWithContentsOfFile: 方法从磁盘中加载一张图片,此时的图片并没有解压缩: 然后将生成的 UIImage 赋值给 UIImageView: 接着一个隐式的 CATransaction 捕获到了 UIImageView 图层树的变化: 在主线程的下一个 run loop 到来时,Core Animation 提交了这个隐式的 transaction,这个过程可

ios图片拉伸两种方法

ios图片拉伸两种方法 UIImage *image = [UIImage imageNamed:@"qq"]; 第一种: // 左端盖宽度 NSInteger leftCapWidth = image.size.width * 0.5f; // 顶端盖高度 NSInteger topCapHeight = image.size.height * 0.5f; // 重新赋值 image = [image stretchableImageWithLeftCapWidth:leftCapW

IOS 图片轮播实现原理 （三图）

IOS 图片轮播实现原理的一种 图片轮播所要实现的是在一个显示区域内通过滑动来展示不同的图片. 当图片较少时我们可以采用在滚动视图上添加很多张图片来实现. 但是如果图片数量较多时,一次性加载过多图片会浪费内存,影响性能. 因此我们要采取适当地方法来实现图片的轮播. 下面我们只是简单的介绍很多方法中的一种简单的实现原理. 一 二 三 四 五 六 七

ios图片瀑布流代码

ios瀑布流,实现简单的瀑布流视图布局,可以显示网络图片,下拉刷新,上拉加载更多. 下载:http://www.huiyi8.com/sc/9087.html ios图片瀑布流代码,布布扣,bubuko.com