Remove blur Effect on Image, when user touch the s

Question

I want to Remove blur for specific where user Touch on the screen. When User Move his finger on the screen Only current touch part will have clear Image. Rest all screen will have blur Image. And when user remove his finger from the screen complete image will be blur again.

What I have done so far is: Added a GPUImage Framework to make an Image blur. On the top of that Image I have one original image. That is hide initially. What I want is when user Tap on the screen then display original image for that selected part only with the particular Circle.

Thanks

Answer 1

Interface builder

1. Start by placing 2 UIImageView over each other. Set both their modes to Aspect Fit. On the UIImageView you want to blur, also check User Interaction Enabled.

---

2. Make sure to set the spacing to nearest neighbour constrains of the UIImageView you DO want to blur to -10, and the spacing to nearest neighbour constrains of the UIImageView you DON'T want to blur to 0.

   

   We do this because later we apply a GaussianBlurFilter of 10. By applying this filter we add 10 extra pixels in each direction of the image we are going to blur, making the image 20 pixels bigger in height and width. Also make sure to check Clip Subviews in your super view, to prevent the blurred image from going outside it's super view's bounds.

---

.h File

1. In your .h declare the UIImageView you want to blur by ctrl+click dragging it to the .h file. Your .h file should look something like this:

   #import <UIKit/UIKit.h>
   
   @interface ViewController : UIViewController
   @property (weak, nonatomic) IBOutlet UIImageView *uivBlurred;
   @end
   

---

.m File

1. In your .m file @synthesize uivBlurred, and declare the following 2 methods:

   - (void)blurImageInImageView: (UIImageView*)imageView
   {
       CIFilter *gaussianBlurFilter = [CIFilter filterWithName:@"CIGaussianBlur"];
       [gaussianBlurFilter setDefaults];
       [gaussianBlurFilter setValue:[CIImage imageWithCGImage:[imageView.image CGImage]] forKey:kCIInputImageKey];
       [gaussianBlurFilter setValue:@10 forKey:kCIInputRadiusKey];
   
       CIImage *outputImage = [gaussianBlurFilter outputImage];
       CIContext *context = [CIContext contextWithOptions:nil];
       CGRect rect = [outputImage extent];
   
       CGImageRef cgimg = [context createCGImage:outputImage fromRect:rect];
       UIImage *blurredImage = [UIImage imageWithCGImage:cgimg];
       [imageView setImage:blurredImage];
       CGImageRelease(cgimg);
   }
   

   and

   -(void)cutHoleInImageView:(UIImageView*)imageView atPoint:(CGPoint)point withRadius: (float)radius
   {
       CGRect imageViewFrame = imageView.bounds;
       CGRect circleFrame = CGRectMake(point.x-radius/2,point.y-radius/2,radius,radius);
       CAShapeLayer* shapeLayer = [CAShapeLayer layer];
       CGMutablePathRef path = CGPathCreateMutable();
       CGPathAddEllipseInRect(path, nil, circleFrame);
       CGPathAddRect(path, nil, imageViewFrame);
       shapeLayer.path = path;
       CGPathRelease(path);
       shapeLayer.fillRule = kCAFillRuleEvenOdd;
       imageView.layer.mask = shapeLayer;
   }
   

---

2. Also implement the following 3 methods in your .m file:

   -(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
   {
       UITouch *touch = [[event allTouches] anyObject];
       if(touch.view == uivBlurred)
       {
           [self cutHoleInImageView:uivBlurred atPoint:[touch  locationInView:uivBlurred] withRadius:180];
       }
   }
   
   -(void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
   {
       UITouch *touch = [[event allTouches] anyObject];
       if(touch.view == uivBlurred)
       {
            [self cutHoleInImageView:uivBlurred atPoint:[touch locationInView:uivBlurred] withRadius:180];
       }
   }
   
   -(void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
   {
       UITouch *touch = [[event allTouches] anyObject];
       if(touch.view == uivBlurred)
       {
            [self cutHoleInImageView:uivBlurred atPoint:[touch locationInView:uivBlurred] withRadius:0];
       }
   }
   

---

3. Add the following line to your viewDidLoad

   [self blurImageInImageView:uivBlurred];

---

4. If all went well your .m file should look something like this

#import "ViewController.h"

@interface ViewController ()
@end

@implementation ViewController
@synthesize uivBlurred;

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    [self blurImageInImageView:uivBlurred];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)blurImageInImageView: (UIImageView*)imageView
{
    CIFilter *gaussianBlurFilter = [CIFilter filterWithName:@"CIGaussianBlur"];
    [gaussianBlurFilter setDefaults];
    [gaussianBlurFilter setValue:[CIImage imageWithCGImage:[imageView.image CGImage]] forKey:kCIInputImageKey];
    [gaussianBlurFilter setValue:@10 forKey:kCIInputRadiusKey];

    CIImage *outputImage = [gaussianBlurFilter outputImage];
    CIContext *context = [CIContext contextWithOptions:nil];
    CGRect rect = [outputImage extent];

    CGImageRef cgimg = [context createCGImage:outputImage fromRect:rect];
    UIImage *blurredImage = [UIImage imageWithCGImage:cgimg];
    [imageView setImage:blurredImage];
    CGImageRelease(cgimg);
}

-(void)cutHoleInImageView:(UIImageView*)imageView atPoint:(CGPoint)point withRadius: (float)radius
{
    CGRect imageViewFrame = imageView.bounds;
    CGRect circleFrame = CGRectMake(point.x-radius/2,point.y-radius/2,radius,radius);
    CAShapeLayer* shapeLayer = [CAShapeLayer layer];
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddEllipseInRect(path, nil, circleFrame);
    CGPathAddRect(path, nil, imageViewFrame);
    shapeLayer.path = path;
    CGPathRelease(path);
    shapeLayer.fillRule = kCAFillRuleEvenOdd;
    imageView.layer.mask = shapeLayer;
}

-(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [[event allTouches] anyObject];
    if(touch.view == uivBlurred)
    {
        [self cutHoleInImageView:uivBlurred atPoint:[touch locationInView:uivBlurred] withRadius:180];
    }
}

-(void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [[event allTouches] anyObject];
    if(touch.view == uivBlurred)
    {
         [self cutHoleInImageView:uivBlurred atPoint:[touch locationInView:uivBlurred] withRadius:180];
    }
}

-(void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [[event allTouches] anyObject];
    if(touch.view == uivBlurred)
    {
         [self cutHoleInImageView:uivBlurred atPoint:[touch locationInView:uivBlurred] withRadius:0];
    }
}

@end

Now add your image, and run the app. You should have something like this:

And when you click on the image:

You can also download a sample project with the above code here