title: Fast blur on iOS
body: <p>I'm running into trouble trying to blur part of the screen in my iOS app. See image for better idea of what I'm trying to do. </p>
  
  <p><img src="https://i.stack.imgur.com/hRrej.png" alt="BlurBox"></p>
  
  <p>Only the content of the "BlurBox" needs to be blurry but the rest can be clear. So if you were looking at table view, only the content underneath the BlurBox would be blurry (even as you scroll). The rest would look clear. </p>
  
  <p>My first approach was to call <code>UIGraphicsGetImageFromCurrentImageContext()</code> every .01s to get all the layers under the BlurBox mushed into one image. Then blur that image and display it onto of everything. </p>
  
  <p>The methods i've tried for blurring are:</p>
  
  <p><a href="https://github.com/tomsoft1/StackBluriOS" rel="noreferrer">https://github.com/tomsoft1/StackBluriOS</a></p>
  
  <p><a href="https://github.com/coryleach/UIImageAdjust" rel="noreferrer">https://github.com/coryleach/UIImageAdjust</a></p>
  
  <p><a href="https://github.com/esilverberg/ios-image-filters" rel="noreferrer">https://github.com/esilverberg/ios-image-filters</a></p>
  
  <p><a href="https://github.com/cmkilger/CKImageAdditions" rel="noreferrer">https://github.com/cmkilger/CKImageAdditions</a></p>
  
  <pre><code>[layer setRasterizationScale:0.25];
  [layer setShouldRasterize:YES];
  </code></pre>
  
  <p>As well as a few custom attempts. I've also looked at Apple's <a href="https://developer.apple.com/library/ios/#samplecode/GLImageProcessing/Introduction/Intro.html" rel="noreferrer">GLImageProcessing</a> but I think that it is a bit overkill for what I'm trying to do here. </p>
  
  <p>The problem is that they are all <strong>to</strong> <strong>slow</strong>. The app is not going on the app store so I'm open to using any private/undocumented frameworks. </p>
  
  <p>A kind of far out idea I had was to override the <code>drawRect</code> method of all the components I use (UITableViewCells, UITableView, etc) and blur each of them independently on the fly. However this would take some time, does this even sound like a viable option? </p>
  
  <hr>
  
  <p><strong>UPDATE</strong>:</p>
  
  <p>I have tried to use <code>CIFilters</code> as follows:</p>
  
  <pre><code>CIImage *inputImage = [[CIImage alloc] initWithImage:[self screenshot]];
  
  CIFilter *blurFilter = [CIFilter filterWithName:@"CIGaussianBlur"];
  [blurFilter setDefaults];
  [blurFilter setValue: inputImage forKey: @"inputImage"];
  [blurFilter setValue: [NSNumber numberWithFloat:10.0f]
                             forKey:@"inputRadius"];
  
  
  CIImage *outputImage = [blurFilter valueForKey: @"outputImage"];
  
  CIContext *context = [CIContext contextWithOptions:nil];
  
  self.bluredImageView.image = [UIImage imageWithCGImage:[context createCGImage:outputImage fromRect:outputImage.extent]];
  </code></pre>
  
  <p>This does work, however it is incredibly slow. :(</p>
  
  <p>I am seeing that some implementations will blur only when I pass in an image loaded from disk. If I pass in a UIImage that I created from using <code>UIGraphicsGetImageFromCurrentImageContext()</code> it doesn't work. Any ideas on why this would be?</p>
  
  <hr>
  
  <p><strong>UPDATE</strong>:</p>
  
  <p>I have tried patel's suggestion as follows:</p>
  
  <pre><code>CALayer *backgroundLayer = [CALayer layer];
  
  CIFilter *blurFilter = [CIFilter filterWithName:@"CIGaussianBlur"];
  [blurFilter setDefaults];
  backgroundLayer.backgroundFilters = [NSArray arrayWithObject:blurFilter];
  
  [[self.view layer] addSublayer:backgroundLayer];
  </code></pre>
  
  <p>However, it doesn't work :(</p>
  
  <hr>
  
  <p><strong>UPDATE SINCE BOUNTY ADDED:</strong></p>
  
  <p>I have managed to get the BlurBox working correctly using <a href="https://github.com/tomsoft1/StackBluriOS" rel="noreferrer">TomSoft1's stackblur</a> since he added the ability to normalize an image to RGBA format (32 bits/pixel) on the fly. However, it is still pretty slow. </p>
  
  <p>I have a timer calling an update every 0.03s to grab the image of what's underneath the BlurBox, blur that image, and display it on screen. I need help on boosting the "fps" on the BlurBox. </p>