iOS使用GPUImage为视频和图片添加滤镜

前言

这次的文章是我对滤镜效果一个学习,文章的文字比较少,花的主要功夫其实都在代码里面。demo的链接在下文已经给出了。

使用场景

下面是我们常用的使用滤镜的场景

  1. 相机录像添加实时滤镜
  2. 相册内视频添加滤镜处理
  3. 相机拍照添加实时滤镜
  4. 给已有的图片/照片添加滤镜

滤镜实现方案

我简单的查了一下,可以使用CoreImage,也可以使用GPUImage来实现。
我这次主要说的是是使用GPUImage来实现滤镜效果。

GPUImage

GPUImage这个框架有多强大我就不再赘述了,想必大家也了解到了,毕竟这是当前做滤镜此类功能最流行的框架。

我们从一个例子来入手吧,下面是给已有图片添加滤镜的例子。大家可以先看一眼这个图。


流程

这张图呢,是给已有的图片添加滤镜效果的一个大概流程图,我们在拿到一个原始的图片,先用它来生成一个GPUImagePicture,然后创建我们需要的滤镜,然后用滤镜来处理我们GPUImagePicture,最后,可以从这个filter类中取到处理后的图片。就这么简单

我简单的写了一下代码,大家请看

// 原图
    UIImage *inputImage = [UIImage imageNamed:@"WID-small.jpg"];
    
    // 生成GPUImagePicture
    _sourcePicture = [[GPUImagePicture alloc] initWithImage:inputImage smoothlyScaleOutput:YES];
    
    // 随便用一个滤镜
    _sepiaFilter = [[GPUImageTiltShiftFilter alloc] init];
    
    // 如果要显示话,得创建一个GPUImageView来进行显示
    GPUImageView * imageView = [[GPUImageView alloc] initWithFrame:self.view.bounds];
    self.view = imageView;
    
    //
    [_sepiaFilter forceProcessingAtSize:imageView.sizeInPixels];
 
    // 个人理解,这个add其实就是把_sourcePicture给_sepiaFilter来处理
    [_sourcePicture addTarget:_sepiaFilter];
    // 用这个imageView来显示_sepiaFilter处理的效果
    [_sepiaFilter addTarget:imageView];
    
    // 开始!
    [_sourcePicture processImage];

一个滤镜效果就这样简单的实现了。

其他的场景跟这种情况的原理也是相同的,整个添加滤镜的过程大家可以理解成分为三部分。

第一部分,就是输入的数据,不管是实时的数据,还是已经存在的数据,都算作输入。

第二部分就是滤镜,GPUImage这个框架给我们提供了大量的滤镜效果了,我们可以根据我们的需要选择使用,如果所有的不满足,滤镜还可以自定义。滤镜拿到我们的输入的原始数据进行处理。

第三部分就是输出,我们在做滤镜的效果时,肯定是要让用户能看到添加了滤镜之后的效果是什么样子的,所以我们需要显示处理后的数据。

这三部分功能GPUImage为我们封装好了对应的类来负责实现,我们只需要按需使用就可以。

DEMO

我参考了网上的文章和GPUImage的官方demo之后,把几种常用场景的是实现汇总了一下。

大家可以去下载这个代码,算是GPUImage使用的简单入门。

https://github.com/Sunxb/GPUImageDemo

demo里面包括我们这这常用场景的实现,然后我还写了混合滤镜的使用,还有一些其他细节的东西。

实现的效果

结束语

GPUImage入门很简单,但毕竟这么强大的框架,要学透还是要我们在日常的使用中继续的探索了。一起加油。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350

推荐阅读更多精彩内容