浅谈iOS模糊效果

  1. 云栖社区>
  2. 博客>
  3. 正文

浅谈iOS模糊效果

xinxinitblog 2016-04-07 21:14:00 浏览852
展开阅读全文

前言

今年过年微信客户端临时出现了一个非常有意思的功能,好友发出带了一层蒙层的照片,发指定金额的红包即可看到清晰相片,今天我们就解开这个神秘的技术面纱。

实现技术汇总

官方:

  1. CoreImage(很早就出现的技术,缺点是转化效率低)

  2. UIBlurEffect(iOS8以后出现的新技术,效率比上面的要好,并且简单)

  3. VImage 苹果提供了一个庞大的库,进行更复杂的模糊的效果实现

非官方:

  • GPUImage(第三方大神写的框架)

让我们浅析一下上面的几种技术

1.CoreImage

imageView=[[UIImageView alloc]initWithFrame:CGRectMake(self.view.bounds.size.width/2-100,

 50, 200, 280)];

imageView.image=[self blur];

-(UIImage *)blur
{
CIContext *context=[CIContext contextWithOptions:nil];

CIImage *imageToBlur=[[CIImage alloc]initWithImage:[UIImage imageNamed:@"mm.png"]];

CIFilter *filter=[CIFilter filterWithName:@"CIGaussianBlur"

   keysAndValues:kCIInputImageKey,imageToBlur, nil];

 outputCIImage=[filter outputImage];

UIImage *image=[UIImage imageWithCGImage:[context createCGImage: 

outputCIImage fromRect:outputCIImage.extent]];

return image;

}

效果如下图所示:

这里写图片描述

需要注意:

1.利用CoreImage 进行模糊处理,是非常消耗CPU性能的,建议另辟线程进行处理,若对多线程不是太熟练的可以参考我之前iOS多线程开发系列之(三)Grand Central Dispatch(GCD)系列教程

2.在CIFilter filterWithName:@”CIGaussianBlur”中的Name参数可以根据情况选择,参数列表可以参考Apple官方教程

2.UIBlurEffect

UIBlurEffect技术是从iOS8之后引进的,比CoreImage性能上要优秀,原理是在图片上方生成一个蒙层,若最低适配iOS8的话可以考虑采取这个 ,核心代码如下:

UIBlurEffect *beffect=[UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];

effectview=[[UIVisualEffectView alloc]initWithEffect:beffect];

effectview.frame=imageView.bounds; 

运用UIBlurEffect是可逆的,我们可以去掉蒙层,显示图片

 [effectview removeFromSuperview]; 

UIBlurEffect如此的简单,我们利用它简单实现一下微信红包图片功能吧

 imageView=[[UIImageView 

alloc]initWithFrame:CGRectMake(self.view.bounds.size.width/2-100, 50, 200, 280)];

imageView.image=[UIImage imageNamed:@"mm.png"];

[self.view addSubview:imageView]; 

 - (IBAction)fuzzyBtn:(id)sender {
UIBlurEffect *beffect=[UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];

effectview=[[UIVisualEffectView alloc]initWithEffect:beffect];

effectview.frame=imageView.bounds;

[imageView addSubview:effectview];
 }
    - (IBAction)LookPhoto:(id)sender {
        [effectview removeFromSuperview];
}

效果图如下:

这里写图片描述

这里写图片描述

3. GPUImage

首先要引入GPUImage框架,建议选择 工具CocoaPods进行添加,若对该工具不是太了解的可以参考我的这篇 iOS工具篇–CocoaPods

     GPUImageGaussianBlurFilter * blurFilter = [[GPUImageGaussianBlurFilter alloc] init];

     blurFilter.blurRadiusInPixels = 2.0;

     UIImage * image = [UIImage imageNamed:@"mm.png"];

     UIImage *blurredImage = [blurFilter imageByFilteringImage:image]; 

最后再推荐几篇关于模糊效果的文章

  1. http://beyondvincent.com/2014/01/29/2014-01-29-ios-7-blur-effects-gpuimage/

  2. http://www.molotang.com/articles/1921.html

  3. http://www.cocoachina.com/ios/20141010/9860.html

网友评论

登录后评论
0/500
评论
xinxinitblog
+ 关注