How do I blur (ios7 style) a section of an image in a UITableViewCell?

Question

I've got a UIImageView that takes up the whole cell and shows an image. I'd like to blur the bottom third of the view in the iOS7 style (we're targeting iOS7). There will be a label over the blurred part.

The issue seems to be that I can't "screenshot" the UIImageView right as I am setting up the cell in tableView:cellForRowAtIndexPath: as it hasn't loaded yet. Although i've even tried setting up a timer for a 0.1 second delay and that also doesn't work.

I've tried the stuff on http://damir.me/posts/ios7-blurring-techniques I've tried https://github.com/justinmfischer/7blur

I'd like to use the new screenshotting API drawViewHierarchyInRect:afterScreenUpdates: I'd also like to use apple's sample code UIImage+ImageEffects

The only thing that has worked so far has been to just put a UIToolbar in but the performance is really slow. I don't need dynamic updates.

I've managed to get the following effect a few times but it has just tinted the view and hasn't actually blurred anything so I'm a bit confused.

Answer 1

Use UIImageEffects sample from apple

Make a Image View with a size of the lower portion you want to blur... and then set its image to a blurred one. also set its content mode to UIViewContentModeBottom for the proper clipping

Since your image isnt the size of the cell.. first get a temp image as it is being displayed in the cell by drawing a UIImage from it.. refer for the code here How to capture UIView to UIImage without loss of quality on retina display

then blur that image

Answer 2

Load this image into a UIImage, blur the image, clip to fit the area that you want. Use UIImage+blur.h