效果图
1.png
Demo下载地址:VisualDemo,觉得不错还请给个star
前言
日常处理毛玻璃效果, 主要的用到就是这几种方式
1.iOS5.0之后就出现了Core Image的API。Core Image的API被放在CoreImage.framework库中。在iOS和OS X平台上，Core Image都提供了大量的滤镜（Filter），这也是Core Image库中比较核心的东西之一。按照官方文档记载，在OS X上有120多种Filter，而在iOS上也有90多种。
2.第三方框架GPUImage
3.iOS 7之前UIToolbar
4.iOS 8之后苹果新增加的一个类UIVisualEffectView
5.vImage也是苹果推出的一个库在Accelerate.framework框架中
下面就依次讲述这几种方式的实现
Core Image实现方式代码如下:
- (UIImage *)coreBlurImage:(UIImage *)image withBlurNumber:(CGFloat)blur{
//获取绘制上下文
CIContext *context = [CIContext contextWithOptions:nil];
//获取CIImage
CIImage *inputImage = [CIImage imageWithCGImage:image.CGImage];
//创建滤镜对象 CIGaussianBlur:高斯模糊
CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"];
[filter setValue:inputImage forKey:kCIInputImageKey];
//改变模糊效果值
[filter setValue:@10.0f forKey:@"inputRadius"];
//模糊图片渲染并输出CIImage
CIImage *result = [filter valueForKey:kCIOutputImageKey];
CGImageRef outImage = [context createCGImage:result fromRect:[result extent]];
UIImage *blurImage = [UIImage imageWithCGImage:outImage];
CGImageRelease(outImage);
return blurImage;
}
CIGaussianBlur即是常用的高斯滤镜, Filter都是按字符串的名字去创建的, 详情见官方文档除了这里提到的多种Filter之外，Core Image还提供了CIDetector等类，可以支持人脸识别等，在OS X上Core Image也做了更多支持。
GPUImage
GPUImageGaussianBlurFilter * blurFilter = [[GPUImageGaussianBlurFilter alloc] init];
blurFilter.blurRadiusInPixels = 2.0;
UIImage * image = [UIImage imageNamed:@"xxx"];
UIImage *blurredImage = [blurFilter imageByFilteringImage:image];
代码上比使用Core Image的情况简单得多
上面2种都是比较耗性能的, 慎用
UIToolbar简单易懂，但是效果单一，系统提供的样式也就UIBarStyleDefault和UIBarStyleBlack两种
UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.view.bounds];
imageView.image = [UIImage imageNamed:@"image"];
imageView.contentMode = UIViewContentModeScaleAspectFill;
imageView.layer.masksToBounds = YES;
[self.view addSubview:imageView];
/** UIBarStyle 毛玻璃的样式(枚举)
* UIBarStyleDefault = 0, // 浅色
* UIBarStyleBlack = 1, // 深色
* UIBarStyleBlackOpaque = 1, // Deprecated. Use UIBarStyleBlack
* UIBarStyleBlackTranslucent = 2, // Deprecated. Use UIBarStyleBlack and set the translucent property to YES
*/
UIToolbar * toolbar = [[UIToolbar alloc] initWithFrame:imageView.bounds];
toolbar.barStyle = UIBarStyleBlack;
toolbar.alpha = 0.9;
[imageView addSubview:toolbar];
UIVisualEffectView: 比UIToolbar强大一点, 主要用到了这个类
UIVisualEffect: 继承自UIView，可以看成是专门用于处理毛玻璃效果的视图。使用UIVisuaEffectView有一点需要特别注意，不要在UIVisuaEffectView实例化View上面直接添加subViews，应该将需要添加的子视图添加到其contentView上。同时，尽量避免将UIVisualEffectView对象的alpha值设置为小于1.0的值，因为创建半透明的视图会导致系统在离屏渲染时去对UIVisualEffectView对象及所有的相关的子视图做混合操作,比较消耗性能。UIBlurEffect: 使用该效果，会使得UIVisualEffectView下面的内容出现毛玻璃化UIVibrancyEffect: 生动效果, 该效果能够放大和调整放在UIVisualEffectView对象下面的内容的颜色UIVisualEffect：一个视觉效果抽象类，继承自NSObject，是UIBlurEffect和UIVibrancyEffect的父类
UIBlurEffect
_imageView = [[UIImageView alloc] initWithFrame:self.view.bounds];
_imageView.image = [UIImage imageNamed:@"image"];
_imageView.contentMode = UIViewContentModeScaleAspectFill;
_imageView.layer.masksToBounds = YES;
[self.view addSubview:_imageView];
/** UIBlurEffect 毛玻璃的样式(枚举)
* UIBlurEffectStyleExtraLight, // 极度白
* UIBlurEffectStyleLight, // 浅色
* UIBlurEffectStyleDark // 深色
*/
UIBlurEffect * effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
UIVisualEffectView * effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
effectView.frame = CGRectMake(0, 100, self.view.bounds.size.width, 200);
[_imageView addSubview:effectView];
UIVibrancyEffect
UIBlurEffect * blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
UIVibrancyEffect * vibrancy = [UIVibrancyEffect effectForBlurEffect:blurEffect];
UIVisualEffectView * effectView = [[UIVisualEffectView alloc] initWithEffect:vibrancy];
UIView *redView = [[UIView alloc]init];
redView.backgroundColor = [UIColor blueColor];
[effectView.contentView addSubview:redView];
effectView.frame = CGRectMake(0, 310,375, 300);
redView.frame = effectView.bounds;
[self.view addSubview:effectView];
效果图:
3.png
运用
UIBlurEffect是可逆的，我们可以去掉蒙层，显示图片
[effectView removeFromSuperview];
vImage是Accelerate.framework框架中的这个framework主要是用来做数字信号处理、图像处理相关的向量、矩阵运算的库。首先导入#import我们可以认为我们的图像都是由向量或者矩阵数据构成的，Accelerate里既然提供了高效的数学运算API，自然就能方便我们对图像做各种各样的处理。模糊算法就是用到了vImageBoxConvolve_ARGB8888这个函数:
- (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;
}
总结:
以上就是几种常用的毛玻璃处理方式, 写的不好还请小伙伴们见谅!
参考文献:
iOS-毛玻璃效果详解
iOS 开发之模糊效果的五种实现