[Solved] Remove blur Effect on Image, when user touch the screen [closed]


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.

  1. 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.

    enter image description hereenter image description here

    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;
    }
    

  1. 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];
        }
    }
    

  1. Add the following line to your viewDidLoad

    [self blurImageInImageView:uivBlurred];


  1. 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:

enter image description here

And when you click on the image:

enter image description here

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

4

solved Remove blur Effect on Image, when user touch the screen [closed]