Blur the background of iOS images

Blur the background of iOS images
1. Use the fuzzy filter in CoreImage

Original:

Implementation of CoreImage:

-(Void) viewDidLoad {[super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. UIImage * image = [UIImage imageNamed: @ "icon"];/* .. blur filter in CoreImage .. * // CIImage, equivalent to UIImage, serves to obtain image resources CIImage * ciImage = [[CIImage alloc] initWithImage: image]; // CIFilter, gaussian blur filter CIFilter * blurFilter = [CIFilter filterWithName: @ "CIGaussianBlur"]; // input the image to the filter [blurFilter setValue: ciImage forKey: kCIInputImageKey]; // used to query parameters that can be set by the filter and NSLog (@ "% @", [blurFilter attributes]); // set the Blur level. The default value is 10, value Range: (0-100) [blurFilter setValue: @ (20) forKey: @ "inputRadius"]; // output the processed image to CIImage * outCiImage = [blurFilter valueForKey: kCIOutputImageKey]; // CIContext * context = [CIContext contextwitexceptions: nil]; // obtain the CGImage handle, that is, retrieve the image CGImageRef outCGImage = [context createCGImage: outCiImage fromRect: [outCiImage extent]; // obtain the image UIImage * blurImage = [UIImage imageWithCGImage: outCGImage]; // release the CGImage handle CGImageRelease (outCGImage ); UIImageView * imageView = [[UIImageView alloc] initWithFrame: self. view. bounds]; imageView. image = blurImage; [self. view addSubview: imageView];}

[BlurFilter attributes] the output is as follows: // parameters and related information. If no settings are made, the default value is 10 (CIAttributeDefault = 10 ); {"category" = "10.4"; "category" = 6; Category = (CICategoryBlur, category, CICategoryVideo, CICategoryBuiltIn); CIAttributeFilterDisplayName = "Gaussian Blur"; CIAttributeFilterName = category; Category = "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 = feature ;}; inputRadius = {CIAttributeClass = NSNumber; CIAttributeDefault = 10; CIAttributeDescription =" The radius determines how 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 ;};}

The default value is 10:

The default value is 50:

2. Use UIImage + ImageEffects

Download from this address: https://github.com/youxianming/uiimageblur. there are many other things worth mentioning;
Import the UIImage + ImageEffects file to the project;

Implementation of UIImage + ImageEffects:

UIImage * image = [UIImage imageNamed: @ "icon"]; // it takes time to render the blur effect, we suggest rendering the image in the Child thread // blur the image. UIImage * blurImage = [image blurImage]; // set the Blur level. UIImage * blurImage1 = [image blurImageWithRadius: 10]; // set the local blur level. UIImage * 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; // part of the cropped image-(UIImage *) croppedImageAtFrame :( CGRect) frame; */UIImageView * imageView = [[UIImageView alloc] initWithFrame: self. view. bounds]; imageView. image = blurImage; [self. view addSubview: imageView];

They are as follows:

// Partial fuzzy search

// Gray

3. Use uivisualiztview

Note: uivisualpolictview is applicable only to iOS 8 or later users. It cannot be used if it is less than 8;

Implementation of uivisualiztview:

1. Add the text content directly to effectView (in this case, the text content cannot match the background );

UIImage * image = [UIImage imageNamed: @ "icon"]; UIImageView * imageView = [[UIImageView alloc] initWithFrame: self. view. bounds]; imageView. image = image; [self. view addSubview: imageView]; UIBlurEffect * blur = [custom twithstyle: Custom]; // create a Fuzzy view uivisualiztview * Custom tview = [[uivisualiztview alloc] initWithEffect: blur]; custom tview. frame = CGRectMake (0,250, imageView. frame. size. width, 200); [imageView addSubview: effectView]; // Add the display text UILabel * lable = [[UILabel alloc] initWithFrame: effectView. bounds]; lable. text = @ "Haha"; lable. textAlignment = NSTextAlignmentCenter; lable. font = [UIFont systemFontOfSize: 24]; [effectView. contentView addSubview: lable];

As follows:

2. Add it to the subview of the lateral tview to make the text match the background;

UIImage * image = [UIImage imageNamed: @ "icon"]; UIImageView * imageView = [[UIImageView alloc] initWithFrame: self. view. bounds]; imageView. image = image; [self. view addSubview: imageView]; UIBlurEffect * blur = [custom twithstyle: Custom]; // create a Fuzzy view uivisualiztview * Custom tview = [[uivisualiztview alloc] initWithEffect: blur]; custom tview. frame = CGRectMake (0,250, imageView. frame. size. width, 200); [imageView addSubview: effectView]; // Add the display text UILabel * lable = [[UILabel alloc] initWithFrame: effectView. bounds]; lable. text = @ "Haha"; lable. textAlignment = NSTextAlignmentCenter; lable. font = [UIFont systemFontOfSize: 24]; // create the uivisual1_tview of the fuzzy sub-view. // 1. create a sub-Fuzzy view uivisualpolictview * subEffectView = [[uivisualpolictview alloc] initWithEffect: [UIVibrancyEffect effectForBlurEffect :( UIBlurEffect *) effectView. effect]; // 2. subEffectView. frame = effectView. bounds; // 3. add the sub-Fuzzy view to the contentView of the lateral tview to take effect. contentView addSubview: subEffectView]; // 4. add the view to be displayed to achieve the special effect [subEffectView. contentView addSubview: lable];

As follows:

4. Automatically blur the image after it is downloaded

Import the UIImage + ImageEffects and GCD files in the project;
UIImage + ImageEffects address: https://github.com/YouXianMing/UIImageBlur;
GCD address: https://github.com/YouXianMing/GCD-Program;

Code implementation:

Create a subclass of UIView and name it BlurDownloadPicView;
BlurDownloadPicView. h:

# Import
  
   
@ Interface BlurDownloadPicView: UIView // image @ property (nonatomic, strong) NSString * picUrl; // method of image display @ property (nonatomic) UIViewContentMode contentMode; // start execution-(void) startProgress; @ end
  

BlurDownloadPicView. m:

# Import "BlurDownloadPicView. h "# import" GCD. h "# import" UIImage + ImageEffects. h "@ interface BlurDownloadPicView () @ property (nonatomic, strong) UIImageView * imageView; @ end @ implementation example-(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: ^ {// create a request NSURLRequest * request = [NSURLRequest requestWithURL: [NSURL URLWithString: self. picUrl]; // because it is a synchronous request, the main thread (mainQueue) NSData * data = [NSURLConnection sendSynchronousRequest: request returningResponse: nil error: nil] will be blocked; // obtain the image UIImage * image = [[UIImage alloc] initWithData: data]; // blur the image to block the main thread (mainQueue) UIImage * blurImage = [image blurImage]; [GCDQueue executeInMainQueue: ^ {// load image self. imageView. image = blurImage; [UIView animateWithDuration: 1 animations: ^ {self. imageView. alpha = 1 ;}] ;}}// rewrite set, get method-(void) setContentMode :( UIViewContentMode) contentMode {self. contentMode = contentMode; self. imageView. contentMode = contentMode;}-(UIViewContentMode) contentMode {return self. contentMode ;}

Implementation in ViewController. m;
Introduce the # import "BlurDownloadPicView. h" header file

Code implementation in 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: