Blur View Implementation in iOS

Creating Blur Background from UIView

We have seen lots of the applications where there is the blurred view in the background of the screen that is generated at runtime. We can create the blurred image from the current screen by applying Gaussian blur.

Original Screen

Blur View of Screen

// Create a graphics context for creating the Image from the UIView

UIGraphicsBeginImageContext(screenView.bounds.size);

// Render the screen in the current graphics contect

[screenView.layer renderInContext:UIGraphicsGetCurrentContext()];

// Get the UIImage of the view

UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

CGRect rectCrop = CGRectMake(0,0,[UIScreen mainScreen].bounds.size.width,[UIScreen mainScreen].bounds.size.height);

//Create the ImageRef with the rect of device size

CGImageRef imageRef = CGImageCreateWithImageInRect([viewImage CGImage], rectCrop);

//Create the UIImage from the imageRef

UIImage *newImage = [UIImage imageWithCGImage:imageRef scale:1.0 orientation:viewImage.imageOrientation];

//Create a core image input context

CIContext *context = [CIContext contextWithOptions:nil];

//Create a new image from content of previous image

CIImage *inputImage = [CIImage imageWithCGImage:newImage.CGImage];

// setting up Gaussian Blur (we could use one of many filters offered by Core Image)

CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"];

//Set the input image

[filter setValue:inputImage forKey:kCIInputImageKey];

//Set the input radius - Chnage this value for different blur level

[filter setValue:[NSNumber numberWithFloat:blurValue] forKey:@"inputRadius"];

//get the output for image

CIImage *result = [filter valueForKey:kCIOutputImageKey];

// CIGaussianBlur has a tendency to shrink the image a little,

// this ensures it matches up exactly to the bounds of our original image

CGImageRef cgImage = [context createCGImage:result fromRect:[inputImage extent]];

//Create the UIImage from the new blurred image

UIImage *imgRef = [[UIImage alloc]initWithCGImage:cgImage];

To Create a Blur Image from original image

We can create a blur image from the original Image same by applying the Gaussian blur on UIImage.

//Create a core image input context

CIContext *context = [CIContext contextWithOptions:nil];

//Create a new image from content of previous image

CIImage *inputImage = [CIImage imageWithCGImage:viewImage.CGImage];

// setting up Gaussian Blur (we could use one of many filters offered by Core Image)

CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"];

//Set the input image

[filter setValue:inputImage forKey:kCIInputImageKey];

//Set the input radius - Chnage this value for different blur level

[filter setValue:[NSNumber numberWithFloat:blurValue] forKey:@"inputRadius"];

//get the output for image

CIImage *result = [filter valueForKey:kCIOutputImageKey];

// CIGaussianBlur has a tendency to shrink the image a little,

// this ensures it matches up exactly to the bounds of our original image

CGImageRef cgImage = [context createCGImage:result fromRect:[inputImage extent]];

//Create the UIImage from the new blurred image

UIImage *imgRef = [[UIImage alloc]initWithCGImage:cgImage];

Here is sample project with all of the code from the above tutorial.