Gaussian Blur over Image - iOS 8

I have a moving background image and I want to blur the bottom of it. I would do it with just photoshop, but since the image is moving, it won't work very well.

Here's what I mean (look at the bottom of the image):

So basically, like the docking effect on the iPhone. I am using iOS 8 but not Swift.


source to share

1 answer

I made a small example based on the photo you got there. My algorithm looks like this:

  • Extract part of the image below.
  • Apply a Gaussian filter to it and lubricate it.
  • Then create a new image context, draw the original image on it.
  • Then paint the blurred part of the image to position it exactly in comparison to the original image.
  • Take the new image out of context.

Here is the source code for that,

 @implementation ViewController

- (void)viewDidLoad{

  [super viewDidLoad];
  UIImageView *imageView = [[UIImageView alloc] init];
  imageView.frame = self.view.bounds;
  [self.view  addSubview:imageView];
  imageView.contentMode = UIViewContentModeScaleAspectFit;
  UIImage *image = [UIImage imageNamed:@"monogram.jpg"];
  imageView.image = [self imageWithBlurredImageWithImage: image andBlurInsetFromBottom: 200 withBlurRadius:3];

- (UIImage*)imageWithBlurredImageWithImage:(UIImage*)image andBlurInsetFromBottom:(CGFloat)bottom withBlurRadius:(CGFloat)blurRadius{
  CGContextRef context =  UIGraphicsGetCurrentContext();
  CGContextScaleCTM(context, 1, -1);
  CGContextTranslateCTM(context, 0, -image.size.height);
  CGContextDrawImage(context, CGRectMake(0, 0, image.size.width, image.size.height), image.CGImage);
  CGContextDrawImage(context, CGRectMake(0, 0, image.size.width, bottom), [self blurImage: image withBottomInset: bottom blurRadius: blurRadius].CGImage);
  image = UIGraphicsGetImageFromCurrentImageContext();
  return image;

- (UIImage*)blurImage:(UIImage*)image withBottomInset:(CGFloat)inset blurRadius:(CGFloat)radius{

  image =  [UIImage imageWithCGImage: CGImageCreateWithImageInRect(image.CGImage, CGRectMake(0, image.size.height - inset, image.size.width,inset))];

  CIImage *ciImage = [CIImage imageWithCGImage:image.CGImage];
  CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"];
  [filter setValue:ciImage forKey:kCIInputImageKey];
  [filter setValue:@(radius) forKey:kCIInputRadiusKey];

  CIImage *outputCIImage = filter.outputImage;
  CIContext *context = [CIContext contextWithOptions:nil];

  return [UIImage imageWithCGImage: [context createCGImage:outputCIImage fromRect:ciImage.extent]];



And here's a screenshot of the result.

enter image description here



All Articles