Using semi-transparent fuzzy effects in iOS development

Using semi-transparent fuzzy effects in iOS development

In iOS development, we have a lot of options for translucent blur effects. Below are some common methods or tools.

0. Core Image

As a leader in design and experience, apple must have excellent support for Image effects and Image processing. On the iOS platform, Core Image APIs appeared after 5.0. The Core Image API is stored in the CoreImage. framework library.

On iOS and OS X platforms, Core Image provides a large number of filters, which are also one of the Core features in the Core Image library. According to official documents, there are more than 120 filters on OS X, and more than 90 filters on iOS.

The following is a sample code of fuzzy Core Image:

1 2 3 4 5 6 7 8

CIContext *context = [CIContext contextWithOptions:nil]; CIImage *image = [CIImage imageWithContentsOfURL:imageURL]; CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"]; [filter setValue:image forKey:kCIInputImageKey]; [filter setValue:@2.0f forKey: @"inputRadius"]; CIImage *result = [filter valueForKey:kCIOutputImageKey]; CGImageRef outImage = [context createCGImage: result fromRect:[result extent]]; UIImage * blurImage = [UIImage imageWithCGImage:outImage];

Here we can see that in order to make Core images more flexible, filters are created based on the string name. For example, the Gaussian blur Filter is "CIGaussianBlur". See the official list here.

In addition to the various filters mentioned here, Core Image also provides CIDetector and other classes to support face recognition and more support for Core Image on OS X.

1. GPUImage

In addition to those officially provided by Apple, third parties also provide image processing tools for this purpose. A guy named Brad Larson developed an open-source library named GPUImage. Similarly, many filters are provided.

The same is Gaussian blur. GPUImage can be used as follows:

1 2 3 4

GPUImageGaussianBlurFilter * blurFilter = [[GPUImageGaussianBlurFilter alloc] init]; blurFilter.blurRadiusInPixels = 2.0; UIImage * image = [UIImage imageNamed:@"xxx"]; UIImage *blurredImage = [blurFilter imageByFilteringImage:image];

At least it seems that the code is much simpler than using Core Image.

2. vImage

In fact, the above Core Image and GPUImage are enough in many cases. Next, let's take a look at vImage. VImage is also a Library launched by Apple in Accelerate. framework.

The Accelerate framework is mainly used for digital signal processing, image processing-related vectors, and matrix operations. We can think that our images are composed of vector or matrix data. Since Accelerate provides efficient mathematical operation APIs, We can naturally process images in a variety of ways.

Based on vImage, we can perform blur effects based on image processing principles, or use existing tools. UIImage + ImageEffects is a good image processing database, and its name is also known as a classification extension for UIImage. This tool is widely used.

3. Performance and selection

Now that we know three methods to achieve semi-transparent blur, which one should we choose? This is a problem.

From the support of the system version, these are almost all supported by iOS4 and iOS5. for developers in the iOS8 era, this compatibility is enough.

Core Image is Apple's own Image processing database. It would be nice if Apple optimized it in a specific version. It is difficult to use, and you need to know the Filter Name.

GPUImage comes from a third party, but it is easy to implement and use. In many scenarios, it is caused by the choice of Core Image.

Image Fuzzy processing is a complex computing process, which usually depends on the performance. In this regard, I prefer vImage.