There are several ways to achieve the fuzzy effect in iOS, which are basically divided into two ways: one is to blur the picture, the other is to put the fuzzy control on the UI interface, so that the area covered by the control can achieve the fuzzy effect. I chose two of each. Here’s how to implement them and compare their advantages and disadvantages.




Screenshot 2016-07-29 am 10.10.32.png

coreImage

The fuzzy effect achieved by this method is good, the fuzzy degree can be adjusted in a large range, and can be adjusted according to the actual needs. The downside is that it takes me 1-2 seconds to run on the simulator, so this method needs to be executed in a child thread.

dispatch_async(dispatch_get_global_queue(0, 0), ^{ CIContext *context = [CIContext contextWithOptions:nil]; CIImage *ciImage = [CIImage imageWithCGImage:image.CGImage]; CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"]; [filter setValue:ciImage forKey:kCIInputImageKey]; // Set the blur degree [filter setValue:@30.0f forKey: @"inputRadius"]; CIImage *result = [filter valueForKey:kCIOutputImageKey]; CGRect frame = [ciImage extent]; NSLog(@"%f,%f,%f,%f",frame.origin.x,frame.origin.y,frame.size.width,frame.size.height); CGImageRef outImage = [context createCGImage: result fromRect:ciImage.extent]; UIImage * blurImage = [UIImage imageWithCGImage:outImage]; dispatch_async(dispatch_get_main_queue(), ^{ coreImgv.image = blurImage; }); });Copy the code
vImage

This method is efficient, but the blur is only as good as the one shown above, and when I use it to blur a network-loaded image, the entire image turns red.

/ / you need to import the header files before use # import + (UIImage *) boxblurImage: UIImage *) image withBlurNumber: (CGFloat) blur {if (the blur < 0. F | | the blur > 1. F) {blur = 0.5f; } int boxSize = (int)(blur * 40); boxSize = boxSize - (boxSize % 2) + 1; CGImageRef img = image.CGImage; vImage_Buffer inBuffer, outBuffer; vImage_Error error; void *pixelBuffer; CGDataProviderRef inProvider = CGImageGetDataProvider(img); CFDataRef inBitmapData = CGDataProviderCopyData(inProvider); // Set the attribute inbuffer. width = CGImageGetWidth(img); inBuffer.height = CGImageGetHeight(img); inBuffer.rowBytes = CGImageGetBytesPerRow(img); inBuffer.data = (void*)CFDataGetBytePtr(inBitmapData); pixelBuffer = malloc(CGImageGetBytesPerRow(img) * CGImageGetHeight(img)); if(pixelBuffer == NULL) NSLog(@"No pixelbuffer"); outBuffer.data = pixelBuffer; outBuffer.width = CGImageGetWidth(img); outBuffer.height = CGImageGetHeight(img); outBuffer.rowBytes = CGImageGetBytesPerRow(img); error = vImageBoxConvolve_ARGB8888(&inBuffer, &outBuffer, NULL, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend); if (error) { NSLog(@"error from convolution %ld", error); } CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); CGContextRef ctx = CGBitmapContextCreate( outBuffer.data, outBuffer.width, outBuffer.height, 8, outBuffer.rowBytes, colorSpace, kCGImageAlphaNoneSkipLast); CGImageRef imageRef = CGBitmapContextCreateImage (ctx); UIImage *returnImage = [UIImage imageWithCGImage:imageRef]; //clean up CGContextRelease(ctx); CGColorSpaceRelease(colorSpace); free(pixelBuffer); CFRelease(inBitmapData); CGColorSpaceRelease(colorSpace); CGImageRelease(imageRef); return returnImage; }Copy the code

Both of the following methods are simple to implement, but only a few system-provided styles are available. BlurEffect, which didn’t come out until after iOS8, is basically the same as the toolbar, with a darker style than the toolbar, as shown in the larger image above.

BlurEffect
UIImageView *blurImgv = [[UIImageView alloc]initWithFrame:CGRectMake(50, 500, 150, 150)];
blurImgv.image = image;
[self.view addSubview:blurImgv];
UIBlurEffect *beffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
UIVisualEffectView *view = [[UIVisualEffectView alloc]initWithEffect:beffect];
view.frame = blurImgv.frame;
[self.view addSubview:view];Copy the code
toolbar
UIImageView *toolImgv = [[UIImageView alloc]initWithFrame:CGRectMake(210, 500, 150, 150)];
toolImgv.image = image;
[self.view addSubview:toolImgv];
UIToolbar *toolBar = [[UIToolbar alloc]initWithFrame:CGRectMake(210, 500, 150, 150)];
toolBar.barStyle = UIBarStyleDefault;
[self.view addSubview:toolBar];Copy the code

Above introduced four kinds of fuzzy effect realization method, also carried on the simple comparison. Specific use or according to the needs of the project to choose the most appropriate method.