Creating a blur effect in iOS7

Question

I have been searching for an answer to this question in a few hours now, and I just can't figure it out. I want to add a gaussian blur effect to the image when i press the button "Button". The user is the one that is adding the image.

I have created an action for the "Button" based on sources from SO and other places on the web. It will not work. What am I doing wrong? Any code would be greatly appreciated. Here is my "Button" action:

- (IBAction)test:(id)sender {     CIFilter *gaussianBlurFilter = [CIFilter filterWithName: @"CIGaussianBlur"];     [gaussianBlurFilter setValue:imageView.image forKey: @"inputImage"];     [gaussianBlurFilter setValue:[NSNumber numberWithFloat: 10] forKey: @"inputRadius"]; } 

If you need anything else that I have done to answer the question, please let me know :D

Answer 1

Three observations:

1. You need to set the inputImage to be the the CIImage from your UIImage:

   [gaussianBlurFilter setValue:[CIImage imageWithCGImage:[imageView.image CGImage]] forKey:kCIInputImageKey]; 

2. I don't see you grabbing the outputImage, e.g.:

   CIImage *outputImage = [gaussianBlurFilter outputImage]; 

3. And you presumably want to convert that CIImage back to a UIImage.

So, putting that all together:

CIFilter *gaussianBlurFilter = [CIFilter filterWithName:@"CIGaussianBlur"]; [gaussianBlurFilter setDefaults]; CIImage *inputImage = [CIImage imageWithCGImage:[imageView.image CGImage]]; [gaussianBlurFilter setValue:inputImage forKey:kCIInputImageKey]; [gaussianBlurFilter setValue:@10 forKey:kCIInputRadiusKey];  CIImage *outputImage = [gaussianBlurFilter outputImage]; CIContext *context   = [CIContext contextWithOptions:nil]; CGImageRef cgimg     = [context createCGImage:outputImage fromRect:[inputImage extent]];  // note, use input image extent if you want it the same size, the output image extent is larger UIImage *image       = [UIImage imageWithCGImage:cgimg]; CGImageRelease(cgimg); 

---

Alternatively, if you go to the WWDC 2013 sample code (paid developer subscription required) and download iOS_UIImageEffects, you can then grab the UIImage+ImageEffects category. That provides a few new methods:

- (UIImage *)applyLightEffect; - (UIImage *)applyExtraLightEffect; - (UIImage *)applyDarkEffect; - (UIImage *)applyTintEffectWithColor:(UIColor *)tintColor; - (UIImage *)applyBlurWithRadius:(CGFloat)blurRadius tintColor:(UIColor *)tintColor saturationDeltaFactor:(CGFloat)saturationDeltaFactor maskImage:(UIImage *)maskImage; 

So, to blur and image and lightening it (giving that "frosted glass" effect) you can then do:

UIImage *newImage = [image applyLightEffect]; 

Interestingly, Apple's code does not employ CIFilter, but rather calls vImageBoxConvolve_ARGB8888 of the vImage high-performance image processing framework.

This technique is illustrated in WWDC 2013 video Implementing Engaging UI on iOS.

---

I know the question was about iOS 7, but now in iOS 8 one can add a blur effect to any UIView object with UIBlurEffect:

UIVisualEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]; UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];     effectView.frame = imageView.bounds; [imageView addSubview:effectView]; 

Answer 2

This worked for me, however it is slow. I will do the transformation on app loading and use the once transformed image in many places.

This blur effect is for iOS 8.4. Swift language.

override func viewDidLoad() {     super.viewDidLoad()      var backgroundImage = self.blurImage(UIImage(named: "background.jpg")!)      self.view.backgroundColor = UIColor(patternImage:backgroundImage) }  func blurImage(imageToBlur:UIImage) -> UIImage {     var gaussianBlurFilter = CIFilter(name: "CIGaussianBlur")     gaussianBlurFilter.setValue(CIImage(CGImage: imageToBlur.CGImage), forKey:kCIInputImageKey)      var inputImage = CIImage(CGImage: imageToBlur.CGImage)      var outputImage = gaussianBlurFilter.outputImage     var context = CIContext(options: nil)     var cgimg = context.createCGImage(outputImage, fromRect: inputImage.extent())      return UIImage(CGImage: cgimg)! }