IOS picture background Blur effect

IOS picture background blur effect 1. Using the blur filter in Coreimage

The original is as follows:

Implementation of Coreimage:

- (void) Viewdidload {[Super Viewdidload];Additional setup after loading the view, typically from a nib.UIImage * image = [UIImage imagenamed:@"Icon"];/*.. Blur effect filter in Coreimage: */Ciimage, equivalent to UIImage, functions for acquiring picture Resources ciimage * Ciimage = [[Ciimage alloc]initwithimage:image];Cifilter, Gaussian blur filter cifilter * blurfilter = [Cifilter filterwithname:@"Cigaussianblur"];Enter the picture into the filter [Blurfilter setvalue:ciimage Forkey:kciinputimagekey];Used to query the parameters that the filter can set and some related informationNSLog (@"%@", [Blurfilter attributes]);Set the degree of ambiguity by default to 10, range of values (0-100) [Blurfilter setvalue:@ (forkey:@)"Inputradius"];Will handle the picture output ciimage * outciimage = [Blurfilter Valueforkey:kcioutputimagekey]; //cicontext cicontext * context = [Cicontext contextwithoptions:Nil]; //Get cgimage handle, i.e. take picture out of data stream cgimageref Outcgimage = [Context createcgimage:outciimage fromrect:[outciimage extent] ]; //finally get to Picture UIImage * blurimage = [UIImage imagewithcgimage:outcgimage]; //release cgimage handle Cgimagerelease (Outcgimage); Uiimageview * ImageView = [[uiimageview alloc]initwithframe:self. View. bounds]; ImageView. image = Blurimage; [self. View Addsubview:imageview];}              

[Blurfilter attributes] printing results are as follows://parameters and some related information, if you do not make any settings, the default degree isTen (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 so 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 is used to create the blur. The larger the radius, the blurrier the result. "; Ciattributedisplayname = Radius; Ciattributeidentity = 0; Ciattributem in= 0; Ciattributeslidermax = 100; Ciattributesliderm in= 0; Ciattributetype = Ciattributetypescalar; };}

The default level is 10 as follows:

The default level is 50 as follows:

2. Using uiimage+imageeffects

To the address download: Https://github.com/YouXianMing/UIImageBlur, there are many good things, it is worth attention;
Import uiimage+imageeffects files into the project can be used;

Implementation of Uiimage+imageeffects:

UIImage * image = [UIImage imagenamed:@"Icon"];Blur effect rendering is time-consuming and recommended to render in child threadsBlur a pictureUIImage * Blurimage = [image blurimage];Setting the degree of ambiguityUIImage * BlurImage1 = [Image blurimagewithradius:10];Set local blur degreeUIImage * BlurImage2 = [Image Blurimageatframe:cgrectmake (0,0, image. Size. width, image. Size. height/2); //Grayscale effect UIImage * BlurImage3 = [image grayscale]; /* Other methods, you can try to use//fixed width and fixed height-(UIImage *) Scalewithfixedwidth: (cgfloat) width; -(UIImage *) Scalewithfixedheight: (cgfloat) height; Average Color-(Uicolor *) Averagecolor; Crop a part of a picture-(UIImage *) Croppedimageatframe: (CGRect) frame; * /Uiimageview * ImageView = [[uiimageview alloc]initwithframe: Self. View. bounds]; ImageView . image = Blurimage; [self. View Addsubview:imageview];              

The following are the differences:

Local Blur

Grey

3. Using Uivisualeffectview

Note: Uivisualeffectview only applies to users iOS 8 or above, and can only be used if the following 8 is not available;

Implementation of Uivisualeffectview:

1. The text content is added directly to the Effectview (the text content in this case cannot be in accordance with the background);

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]; Create Blur View Uivisualeffectview * Effectview = [[Uivisualeffectview Alloc]initwitheffect:blur]; Effectview. frame = CGRectMake (0,250, Imageview.frame.width, 200) .bounds].text = @ "hahaha haha" .textalignment = Nstextalignmentcenter.font = [UIFont Systemfontofsize:24]; [Effectview.contentview addsubview:lable]   

As follows:

2. Add the Effectview in the sub-view to match the text with the background;

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]; Create Blur View Uivisualeffectview * Effectview = [[Uivisualeffectview Alloc]initwitheffect:blur]; Effectview. frame = CGRectMake (0,, ImageView. Frame. Size. width,200); [ImageView Addsubview:effectview]; Add display text UILabel * lable = [[UILabel Alloc]initwithframe:effectview. Bounds]; lable. Text = @"Hahaha"; lable. TextAlignment = Nstextalignmentcenter; lable. Font = [Uifont systemfontofsize:24] ;//Create a Uivisualeffectview of the fuzzy sub-view//1. Create a sub-blurred view uivisualeffectview * Subeffectview = [[Uivisualeffectview Alloc]initwitheffect:[uivibrancyeffect effectforblureffect: (Uiblureffect *) Effectview. Effect]];//2. Set the size Subeffectview. frame = Effectview. Bounds;//3. Adding a sub-fuzzy view to the Contentview of Effectview will take effect [ Effectview. Contentview Addsubview:subeffectview];//4. Add the view you want to display to achieve a special effect [Subeffectview. Contentview addsubview:lable];              

As follows:

4. Auto blur effect after downloading image

Import Uiimage+imageeffects and GCD files in the project;
Uiimage+imageeffects Address: Https://github.com/YouXianMing/UIImageBlur;
GCD Address: Https://github.com/YouXianMing/GCD-Program;

The implementation of the Code:

Create a UIView subclass, named Blurdownloadpicview;
Contents of BlurDownloadPicView.h:

#import <UIKit/UIKit.h>@interface BlurDownloadPicView : UIView//图片@property (nonatomic, strong)NSString * picUrl;//图片显示的方式@property (nonatomic)UIViewContentMode contentMode;//开始执行- (void)startProgress;@end

Contents of BLURDOWNLOADPICVIEW.M:

#import"BlurDownloadPicView.h"#import"GCD.h"#import"Uiimage+imageeffects.h"@interfaceBlurdownloadpicview ()@property (Nonatomic,Strong)Uiimageview * ImageView;@end@implementationblurdownloadpicview-(Instancetype) initWithFrame: (CGRect) frame{Self = [Super Initwithframe:frame];if (Self) {[Self loadsubviews]; }ReturnSelf;} - (void) loadsubviews{Self. ImageView = [[Uiimageview Alloc]initwithframe:Self. bounds];Self. ImageView. Alpha =0; [Self Addsubview:Self. ImageView];} - (void) startprogress{if (Self. picurl) {[Gcdqueue executeinglobalqueue:^{Create requestNsurlrequest * request = [Nsurlrequest requestwithurl:[Nsurl URLWithString:Self. Picurl]];Because it is a synchronous request, it blocks the main thread (mainqueue) nsdata * data = [Nsurlconnection sendsynchronousrequest:request Returningresponse:Nil Error:NIL];Get PicturesUIImage * image = [[UIImage Alloc]initwithdata:data];Blurring the image will block the main thread (mainqueue)UIImage * Blurimage = [image blurimage]; [Gcdqueue executeinmainqueue:^{Loading picturesself. ImageView. image = Blurimage; [UIView animatewithduration:1 animations:^{ selfimageView. Alpha = 1;}];}];}];} //Override Set,get Method-(void) Setcontentmode: (uiviewcontentmode) contentmode{ self. Contentmode = Contentmode; self. ImageView. Contentmode = Contentmode;} -(Uiviewcontentmode) contentmode{ return self. Contentmode;}       

The realization within the VIEWCONTROLLER.M;
Introduction of #import "BlurDownloadPicView.h" header file

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

As follows:

IOS picture background Blur effect