iOS给图片添加滤镜&使用openGLES动态渲染图片详解及实例

ios给图片添加滤镜&使用opengles动态渲染图片

给图片增加滤镜有这两种方式: coreimage / opengles

 下面先说明如何使用coreimage给图片添加滤镜, 主要为以下步骤:

#1.导入ciimage格式的原始图片

#2.创建cifilter滤镜

#3.用cicontext将滤镜中的图片渲染出来

#4.导出渲染后的图片

参考代码:

//导入ciimage
  ciimage *ciimage = [[ciimage alloc] initwithimage:[uiimage imagenamed:@"hua"]];
  
  //创建出filter滤镜
  cifilter *filter = [cifilter filterwithname:@"cipixellate"];
  
  [filter setvalue:ciimage forkey:kciinputimagekey];
  
  [filter setdefaults];
  
  ciimage *outimage = [filter valueforkey:kcioutputimagekey];
  
  //用cicontext将滤镜中的图片渲染出来
  cicontext *context = [cicontext contextwithoptions:nil];
  
  cgimageref cgimage = [context createcgimage:outimage
                    fromrect:[outimage extent]];
  
  //导出图片
  uiimage *showimage = [uiimage imagewithcgimage:cgimage];
  
  cgimagerelease(cgimage);
  
  uiimageview *imageview = [[uiimageview alloc] initwithimage:showimage];
  imageview.center    = self.view.center;
  [self.view addsubview:imageview];

当要设置多个滤镜的时候, 出了新创建一个cifilter外还要额外设定kciinputanglekey, 代码如下:

//导入ciimage
  ciimage *ciimage = [[ciimage alloc] initwithimage:[uiimage imagenamed:@"hua.jpeg"]];
  
  //创建出filter滤镜
  cifilter *filter = [cifilter filterwithname:@"cipixellate"];
  
  [filter setvalue:ciimage forkey:kciinputimagekey];
  
  [filter setdefaults];
  
  ciimage *outimage = [filter valueforkey:kcioutputimagekey];
  
  cifilter *filtertwo = [cifilter filterwithname:@"cihueadjust"];
  
  [filtertwo setvalue:outimage forkey:kciinputimagekey];
  
  [filtertwo setdefaults];
  
  [filtertwo setvalue:@(1.0f) forkey:kciinputanglekey]; //如果不增加这行新增的滤镜不会生效
  
  ciimage *outputimage = [filtertwo valueforkey:kcioutputimagekey];
  
  //用cicontext将滤镜中的图片渲染出来
  cicontext *context = [cicontext contextwithoptions:nil]; 
  
  cgimageref cgimage = [context createcgimage:outputimage
                    fromrect:[outputimage extent]];
  
  //导出图片
  uiimage *showimage = [uiimage imagewithcgimage:cgimage];
  
  cgimagerelease(cgimage);
  
  uiimageview *imageview = [[uiimageview alloc] initwithimage:showimage];
  imageview.center    = self.view.center;
  [self.view addsubview:imageview];

下面来介绍怎么用opengles来使用滤镜渲染图片

使用opengles的步骤大致如下:

#1.导入要渲染的图片

#2.获取opengles渲染的上下文

#3.创建出渲染的glkview buffer

#4.创建coreimage的上下文

#5.进行coreimage的相关设置

#6.开始渲染并显示图片

参考代码如下:

//导入要渲染的图片
  uiimage *showimage = [uiimage imagenamed:@"hua.jpeg"];
  cgrect rect    = cgrectmake(0, 0, showimage.size.width, showimage.size.height);
  
  //获取opengles渲染的上下文
  eaglcontext *eagcontext = [[eaglcontext alloc] initwithapi:keaglrenderingapiopengles2];
  
  //创建出渲染的buffer
  glkview *glkview = [[glkview alloc] initwithframe:rect
                       context:eagcontext];
  [glkview binddrawable];
  [self.view addsubview:glkview];
  
  //创建出coreimage的上下文
  cicontext *cicontext = [cicontext contextwitheaglcontext:eagcontext
                           options:@{kcicontextworkingcolorspace: [nsnull null]}];
  
  //coreimage相关设置
  ciimage *ciimage = [[ciimage alloc] initwithimage:showimage];
  
  cifilter *filter = [cifilter filterwithname:@"cisepiatone"];
  
  [filter setvalue:ciimage forkey:kciinputimagekey];
  [filter setvalue:@(0) forkey:kciinputintensitykey];
  
  //开始渲染
  [cicontext drawimage:[filter valueforkey:kcioutputimagekey]
         inrect:cgrectmake(0, 0, glkview.drawablewidth, glkview.drawableheight)
        fromrect:[ciimage extent]];
  
  [glkview display];

如果要动态渲染, 可以通过uisilder动态调整一下代码的vaule值

[filter setvalue:vaule forkey:kciinputintensitykey];

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！