Five kinds of blur iOS developer of realization

Foreword

In iOS development we often use the blur our interface more attractive, while the iOS itself also provides several API to achieve blur effect, such as: Core Image, use Accelerate.Framework in vImage API, before iOS 7 class system provides UIToolbar, Apple added a new category UIVisualEffectView after iOS 8; in addition there are a number of cattle were written third-party frameworks, such as: GPUImage. Benpian will explain five ways to look for this specific implementation.

text

Here are five ways in accordance with this, the concrete realization of its implementation blur explain one by one:

• Class before providing system UIToolbar frosted glass effects achieved iOS 7:

- (void)toolbarStyle{
    
    CGRect toolbarRect = CGRectMake(0, 0,ScreenW/2,ScreenH); UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:toolbarRect]; /* * UIBarStyleDefault = 0, * UIBarStyleBlack = 1, * UIBarStyleBlackOpaque = 1, // Deprecated. Use UIBarStyleBlack * UIBarStyleBlackTranslucent = 2, // Deprecated. Use UIBarStyleBlack and set the translucent property to YES */ toolbar.barStyle = UIBarStyleBlack; [self.myImageView addSubview:toolbar]; } 

• After iOS 8 Apple added a new category UIVisualEffectView, frosted glass effect is achieved by this class:

- (void)uivisualEffectViewStyle{
    /* NS_ENUM_AVAILABLE_IOS(8_0)
     * UIBlurEffectStyleExtraLight,//额外亮度，（高亮风格）
     * UIBlurEffectStyleLight,//亮风格
     * UIBlurEffectStyleDark,//暗风格
     * UIBlurEffectStyleExtraDark __TVOS_AVAILABLE(10_0) __IOS_PROHIBITED __WATCHOS_PROHIBITED,
     * UIBlurEffectStyleRegular NS_ENUM_AVAILABLE_IOS(10_0), // Adapts to user interface style
     * UIBlurEffectStyleProminent NS_ENUM_AVAILABLE_IOS(10_0), // Adapts to user interface style
     
     */
    //实现模糊效果
    UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark]; //毛玻璃视图 UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];; effectView.frame = CGRectMake(0, 0, ScreenW/2, ScreenH); [self.myImageView addSubview:effectView]; } 

• iOS5.0 appeared after the API Core Image, Core Image API that is placed CoreImage.framework library on iOS and OS X platform, Core Image offers a large number of filters (Filter), on the OS X there are more than 120 Filter, but also on iOS 90, will produce white edge disposed around after Core Image blur:

- (UIImage *)coreBlurImage:(UIImage *)image withBlurNumber:(CGFloat)blur{
    
    CIContext *context = [CIContext contextWithOptions:nil]; CIImage *inputImage = [CIImage imageWithCGImage:image.CGImage]; //设置filter CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"]; [filter setValue:inputImage forKey:kCIInputImageKey]; [filter setValue:@(blur) forKey:@"inputRadius"]; //模糊图片 CIImage *result = [filter valueForKey:kCIOutputImageKey]; CGImageRef outImage = [context createCGImage:result fromRect:[result extent]]; UIImage *blurImage = [UIImage imageWithCGImage:outImage]; CGImageRelease(outImage); return blurImage; } 

• GPUImage open source library implementation frosted glass effect:

- (UIImage *)GPUImageStyleWithImage:(UIImage *)image{
    
    GPUImageGaussianBlurFilter *filter = [[GPUImageGaussianBlurFilter alloc] init];
    filter.blurRadiusInPixels = 10.0;//值越大，模糊度越大
    UIImage *blurImage = [filter imageByFilteringImage:image]; return blurImage; } 

• vImage belongs Accelerate.Framework, need to import header file Accelerate Accelerate, Accelerate is mainly used for digital signal processing, image processing library associated vector, matrix operations. The image can be considered by the vector or matrix data composed, Accelerate was now provides efficient math API, will naturally help us do various processing of the image, blur algorithm used is vImageBoxConvolve_ARGB8888 this function:

- (UIImage *)boxblurImage:(UIImage *)image withBlurNumber:(CGFloat)blur
{
    if (blur < 0.f || 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; //从CGImage中获取数据 CGDataProviderRef inProvider = CGImageGetDataProvider(img); CFDataRef inBitmapData = CGDataProviderCopyData(inProvider); //设置从CGImage获取对象的属性 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; } 

Source uploaded to fenglinyunshi-git , welcome to download, and made valuable suggestions.

Epilogue

• UIVisualEffectView after iOS8 technology from the introduction of the principle is in the pictures generated above a mask layer, if the minimum adaptation iOS8, then you can consider the use UIBlurEffect is reversible, we can remove the mask layer, display pictures;

[effectview removeFromSuperview]; 

• UIToolbar class systems prior to iOS 7 provided on the image generated above principle is a mask layer.
• Using CoreImage obfuscate very CPU performance;
• GPUImage open source library implementation frosted glass effect is more eating memory, Core Image comparatively better;
• The image blurring processing is a complex calculation, most of the fuzzy picture selection is vImage, the best performance.

UIToolbar UIBlurEffect are generated above and a mask layer over the image blur can be set range; and the other three ways of the original image are blurred after the process returns to render an entire image, the performance is relatively consumption. Figure 1-2 is a memory footprint measured in five ways:

January, not reading, loss of eyes and ears fine cool.