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];

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

(0)

相关推荐

  • Android中Glide加载库的图片缓存配置究极指南

    零.选择Glide 为什么图片加载我首先推荐Glide? 图片加载框架用了不少,从afinal框架的afinalBitmap,Xutils的BitmapUtils,老牌框架universalImageLoader,著名开源组织square的picasso,google推荐的glide到FaceBook推出的fresco.这些我前前后后都体验过,那么面对这么多的框架,该如何选择呢?下面简单分析下我的看法. afinal和Xuils在github上作者已经停止维护了,开源社区最新的框架要属KJFra

  • 了解Android OpenGLES2.0(一)

    什么是OpenGL ES? OpenGL(全写Open Graphics Library)是指定义了一个跨编程语言.跨平台的编程接口规格的专业的图形程序接口.它用于三维图像(二维的亦可),是一个功能强大,调用方便的底层图形库. OpenGL在不同的平台上有不同的实现,但是它定义好了专业的程序接口,不同的平台都是遵照该接口来进行实现的,思想完全相同,方法名也是一致的,所以使用时也基本一致,只需要根据不同的语言环境稍有不同而已.OpenGL这套3D图形API从1992年发布的1.0版本到目前最新20

  • C++俄罗斯方块游戏 无需图形库的俄罗斯方块

    本文实例为大家分享了C++俄罗斯方块游戏的具体实现代码,供大家参考,具体内容如下. #include<stdio.h> #include<stdlib.h> #include<windows.h> #include<time.h> #include<conio.h> #define MOD 28 #define SIZE_N 19 #define SIZE_M 12 int cur_x,cur_y; int score,mark,next,map

  • 基于GD2图形库的PHP生成图片缩略图类代码分享

    要使用PHP生成图片缩略图,要保证你的PHP服务器安装了GD2图形库 使用一个类生成图片的缩略图 1.使用方法 $resizeimage = new resizeimage("图片源文件地址", "200", "100", "0","缩略图地址"); //就只用上面的一句话,就能生成缩略图,其中,源文件和缩略图地址可以相同,200,100分别代表宽和高 2. 缩略图类代码 //使用如下类就可以生成图片缩略图

  • android从系统图库中取图片的实例代码

    本文实例讲述了android从系统图库中取图片的实现方法.分享给大家供大家参考.具体如下: 在自己应用中,从系统图库中取图片,然后截取其中一部分,再返回到自己应用中.这是很多有关图片的应用需要的功能. 写了一个示例,上来就是个大按钮,连布局都不要了.最终,用选取图片中的一部分作为按钮的背景. 这里需要注意几点: ① 从图库中选取出来保存的图片剪辑,需要保存在sd卡目录,不能保存在应用自己的在内存的目录,因为是系统图库来保存这个文件,它没有访问你应用的权限: ② intent.putExtra("

  • Android的Glide库加载图片的用法及其与Picasso的对比

    Glide Glide是一个高效.开源. Android设备上的媒体管理框架,它遵循BSD.MIT以及Apache 2.0协议发布.Glide具有获取.解码和展示视频剧照.图片.动画等功能,它还有灵活的API,这些API使开发者能够将Glide应用在几乎任何网络协议栈里.创建Glide的主要目的有两个,一个是实现平滑的图片列表滚动效果,另一个是支持远程图片的获取.大小调整和展示. Glide 3.0版本以后加入了多项重要功能,同时还支持使用Gradle以及Maven进行构建.该版本包括很多值得关

  • android 调用系统的照相机和图库实例详解

    android手机有自带的照相机和图库,我们做的项目中有时用到上传图片到服务器,今天做了一个项目用到这个功能,所以把我的代码记录下来和大家分享,第一次写博客希望各位大神多多批评. 首先上一段调用android相册和相机的代码: 复制代码 代码如下: Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);//调用android自带的照相机 photoUri = MediaStore.Images.Media.EXTERNAL_CON

  • android创建数据库(SQLite)保存图片示例

    复制代码 代码如下: //1.创建数据库public class DBService extends SQLiteOpenHelper { private final static int VERSION = 1;private final static String DATABASE_NAME = "uniteqlauncher.db"; public DBService(Context context) {    this(context, DATABASE_NAME, null,

  • android将图片转换存到数据库再从数据库读取转换成图片实现代码

    首先,我们要把图片存入到数据库中,首先要创建一个数据库, 如下所示: 复制代码 代码如下: package com.android.test; import java.io.ByteArrayOutputStream; import android.content.ContentResolver;import android.content.ContentValues;import android.content.Context;import android.database.sqlite.SQ

  • Android OpenGLES2.0绘制三角形(二)

    选择绘制三角形作为OpenGL ES 2.0的第一个实例,是因为前文中提到的,点.线.三角形是OpenGL ES世界的图形基础.无论多么复杂的几何物体,在OpenGL ES的世界里都可以用三角形拼成.关于Android OpenGL ES 三角形的绘制,在Android官方文档中有详细的说明和步骤,本文实例也是依照官方文档步骤绘制的三角形. 步骤 依照官方文档中的说明,Android中利用OpenGL ES 2.0绘制三角形的步骤为: 1. 在AndroidManifest.xml文件中设置使用

随机推荐