Search code examples
iosobjective-c-categoryuiblureffect

iOS image blur effect with category


I'm trying to add a blur effect using category.

+ (UIImage *)blurImageWithImage:(UIImage*) imageName withView:(UIView*)view {
UIImage *sourceImage = imageName;
CIImage *inputImage = [CIImage imageWithCGImage:sourceImage.CGImage];

// Apply Affine-Clamp filter to stretch the image so that it does not
// look shrunken when gaussian blur is applied
CGAffineTransform transform = CGAffineTransformIdentity;
CIFilter *clampFilter = [CIFilter filterWithName:@"CIAffineClamp"];
[clampFilter setValue:inputImage forKey:@"inputImage"];
[clampFilter setValue:[NSValue valueWithBytes:&transform objCType:@encode(CGAffineTransform)] forKey:@"inputTransform"];

// Apply gaussian blur filter with radius of 30
CIFilter *gaussianBlurFilter = [CIFilter filterWithName: @"CIGaussianBlur"];
[gaussianBlurFilter setValue:clampFilter.outputImage forKey: @"inputImage"];
[gaussianBlurFilter setValue:@10 forKey:@"inputRadius"];

CIContext *context = [CIContext contextWithOptions:nil];
CGImageRef cgImage = [context createCGImage:gaussianBlurFilter.outputImage fromRect:[inputImage extent]];

// Set up output context.
UIGraphicsBeginImageContext(view.frame.size);
CGContextRef outputContext = UIGraphicsGetCurrentContext();

// Invert image coordinates
CGContextScaleCTM(outputContext, 1.0, -1.0);
CGContextTranslateCTM(outputContext, 0, view.frame.size.height);

// Draw base image.
CGContextDrawImage(outputContext, view.frame, cgImage);

// Apply white tint
CGContextSaveGState(outputContext);
CGContextSetFillColorWithColor(outputContext, [UIColor colorWithWhite:1 alpha:0.2].CGColor);
CGContextFillRect(outputContext, view.frame);
CGContextRestoreGState(outputContext);

// Output image is ready.
UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

return outputImage; } 

then I call this function inside a UIView like this:

UIImage *image = [UIImage imageNamed:@"xxx"]
UIImageView *page = [[UIImageView alloc] initWithImage:[UIImage blurImageWithImage:image withView:self]];

If I add this function directly in the class, it works, but not if I do it in UIImage category.


Solution

  • Turns out the problem was I forgot to add "-" when doing context translate. So what I ended up doing is I create a class method.

    Interface:

    + (UIImage *)blurImageWithImageName:(NSString*) imageName withView:(UIView*)view;
    

    Implementation :

     + (UIImage *)blurImageWithImageName:(NSString*) imageName withView:(UIView*)view {
        UIImage *sourceImage = [UIImage imageNamed:imageName];
        CIImage *inputImage = [CIImage imageWithCGImage:sourceImage.CGImage];
    
        // Apply Affine-Clamp filter to stretch the image so that it does not
        // look shrunken when gaussian blur is applied
        CGAffineTransform transform = CGAffineTransformIdentity;
        CIFilter *clampFilter = [CIFilter filterWithName:@"CIAffineClamp"];
        [clampFilter setValue:inputImage forKey:@"inputImage"];
        [clampFilter setValue:[NSValue valueWithBytes:&transform objCType:@encode(CGAffineTransform)] forKey:@"inputTransform"];
    
        // Apply gaussian blur filter with radius of 30
        CIFilter *gaussianBlurFilter = [CIFilter filterWithName: @"CIGaussianBlur"];
        [gaussianBlurFilter setValue:clampFilter.outputImage forKey: @"inputImage"];
        [gaussianBlurFilter setValue:@10 forKey:@"inputRadius"];
    
        CIContext *context = [CIContext contextWithOptions:nil];
        CGImageRef cgImage = [context createCGImage:gaussianBlurFilter.outputImage fromRect:[inputImage extent]];
    
        // Set up output context.
        UIGraphicsBeginImageContext(view.frame.size);
        CGContextRef outputContext = UIGraphicsGetCurrentContext();
    
        // Invert image coordinates
        CGContextScaleCTM(outputContext, 1.0, -1.0);
        CGContextTranslateCTM(outputContext, 0, -view.frame.size.height);
    
        // Draw base image.
        CGContextDrawImage(outputContext, view.frame, cgImage);
    
        // Apply white tint
        CGContextSaveGState(outputContext);
        CGContextSetFillColorWithColor(outputContext, [UIColor colorWithWhite:1 alpha:0.2].CGColor);
        CGContextFillRect(outputContext, view.frame);
        CGContextRestoreGState(outputContext);
    
        // Output image is ready.
        UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    
        return outputImage;
    
    
       }