泰然

 找回密码
 注册泰然
泰然 泰然首页 Cocoa Touch教程 查看内容

[iTyran翻译]iOS 5 Core Image 教程

2012-2-7 13:36| 发布者: u0u0| 查看: 16100| 评论: 5|原作者: ray

摘要: 这是ios5系列教程《 iOS 5 Feast》的第15篇,同时也是新书《iOS 5 By Tutorials》的公开章节。
[iTyran翻译]iOS 5 Core Image 教程
泰然翻译组出品     翻译:蓝羽;校对:Iven,u0u0


原文:Beginning Core Image in iOS 5 Tutorial

作者留言:这是ios5系列教程《 iOS 5 Feast》的第15篇,同时也是新书《iOS 5 By Tutorials》的公开章节。
这篇文章有iOS教程组的成员Jacob Gundersen完成,Jacob Gundersen是一个个人游戏开发者,Third Rail Games的联合创始人,他的最新app – Factor Samurai!

Core Image是一个强大的框架(framework),可以帮助你很容易的运用图像滤镜,比如修改饱和度, 色调,或曝光。它能迅速的使用GPU图形处理器(或CPU,由用户决定)来处理图像数据,快到能实时的处理视频帧。

Core Image滤镜能够一次给图像或视频帧叠加运用多种效果,当多个滤镜叠加处理起来仍然是有效率的,因为它们创建了一个单独的可修改的滤镜应用到图像中去,而不是每个滤镜一个个来处理图像。

每个滤镜都有自己的参数,可以用代码的方式查询滤镜的信息,如作用、输入参数等等。这个系统也能查到有哪些滤镜可以使用。目前,只有部分mac上可用的Core Image滤镜可以用在iOS设备上。随着越来越多的API可用,我们将发现更多滤镜的新属性。

在这篇教程,我们上手试验并玩转Core Image。我们实现一些不同的滤镜,你会发现实时应用很酷的效果到图像上其实很简单。

Core Image 概述
在我们开始之前,先介绍3个Core Imageframework最主要的类
  • CIContext.所有core image的处理由CIContext完成。它类似于Core Graphics或是OpenGL context.
  • CIImage.这个类用来存储图像数据,可以通过UIImage,图像文件或像素数据来创建
  • CIFilter.这个滤镜类用一个字典来定义特定滤镜的详细属性,这些滤镜有vibrancefilters,color inversion filters,cropping filters等等
我们将会在创建我们的项目中依次使用这些。

开始
打开xcode,选择iOS\Application\Single View Application模版新建项目,项目名称填入CITest, Device Family选择iPhone,确保UseAutomatic Reference Counting勾上(其它的则不要勾)。

首先,加入Core Imageframework。在mac上Core Imageframework是QuartzCoreframework的一部分,但是在ios中则是独立的。点击项目file view,选择Build Phases标签,展开Link Binariaswith Library,按下“+”,选择CoreImage.framework添加其加到项目中

从教程的resources包里找到image.png文件,加到你的项目中,我喜欢将所有的图片和声音文件放到Resources group中,你的项目可能没有这个group.如果你想要(不是必须的),文件添加后按住control单击image.png文件,选择New Group from Selection,然后点击文件夹名字,将其改为Resources。

现在我们要隐藏status bar状态条,完成这项任务需要在plist文件中加一个key,加一行代码,以及更改xib的一个设定。

首先是plist,打开Open SupportingFiles\CITest-Info.plist,,按住Control单击任意空白位置 select Add Row. Change the value to Status bar is initally hidden and set the value to YES. 选择Add Row,加入新键值,选择Status bar is initally hidden,选择Value Type为Boolean,勾上(设为YES)。

接下来是xib文件,打开ViewController.xib并点击view,调出属性查看器attributes inspector, 将状态条的值改为None。随着状态条的移除,我们可以在原先状态条的位置增加20个像素, 所以在sizeinspector中,将视图高度由460改为480,从objects面板拖拽一个UIImageView放到view中,位置和大小按下图所:


同时,点xcode菜单View打开Assistant Editor ,使其显示ViewController.h,按住control 把UIImageView拖到@interface下面,Connection选择Outlet,命名为imgV,点击Connect. 最后,在AppDelegate.m加一些代码,在applicationDidFinishLaunchingWithOptions方法:
[[UIApplication sharedApplication] setStatusBarHidden:YES];
运行你的项目,你会看到一个不带状态条的纯灰色的屏幕。初始化设置已完成,现在是加入Core Image的时候了。

基本图像滤镜
开始了,我们将通过CIFilter简单的处理图片,并显示在屏幕上。 每一次当我们对图片运用CIFilters时我们需要做以下4件事情:
  • 创建一个CIImage对象CIImage有以下初始化方法 imageWithURL, imageWithData, imageWithCVPixelBuffer, and imageWithBitmapData:bytesPerRow:size:format:colorSpace. 在大多数时候都会用imageWithURL。
  • 创建一个CIContext一个CIContext可以是基于CPU的,也可以是基于GPU的。
  • 创建一个CIFilter当你创建滤镜时,你需要对其配置一定数量的属性,具体取决于你用的哪个滤镜
  • 得到滤镜输出滤镜输出一个CIImage图像——你可以用CIContext将其转换为UIImage,下面你就会看到。
让我们看看是怎样工作的,在ViewController.m中的viewDidLoad:方法中加入以下代码:
NSString *filePath = 
  [[NSBundle mainBundle] pathForResource:@"image" ofType:@"png"];
NSURL *fileNameAndPath = [NSURL fileURLWithPath:filePath];
 
CIImage *beginImage = 
  [CIImage imageWithContentsOfURL:fileNameAndPath];
CIContext *context = [CIContext contextWithOptions:nil];
 
CIFilter *filter = [CIFilter filterWithName:@"CISepiaTone" 
  keysAndValues: kCIInputImageKey, beginImage, 
  @"inputIntensity", [NSNumber numberWithFloat:0.8], nil];
CIImage *outputImage = [filter outputImage];
 
CGImageRef cgimg = 
  [context createCGImage:outputImage fromRect:[outputImage extent]];
UIImage *newImg = [UIImage imageWithCGImage:cgimg];
 
[imgV setImage:newImg];
 
CGImageRelease(cgimg);

前2行创建了一个NSURL对象来存储我们图片文件的路径。

接下来我们用imageWithContentsOfURL方法创建CIImage以及CIContext。CIContext结构体含有一个NSDictionary,这个字典有一些特定的选项包含色彩格式以及context是运行在CPU还是GPU上,对于这个程序,使用默认值就好了,所以这个参数为空。

然后我们建立CIFilter对象,一个CIFilter结构体包含滤镜名字,一个含有滤镜keys和values的字典。每个滤镜有其特定的keys以及有效的values。

CISepiaTone filter只有2个值,KCIInputImageKey(CIImage类型)和@”inputIntensity”,@”inputIntensity”是0到1的浮点型数据转成NSNumber。这里我们设为0.8. 如果我们没有设定值,大多数滤镜都会使用默认值,CIImage是个例外,它没有默认值,必须给定一个。

得到滤镜处理的CIImage非常简单,使用outputImage属性就行了。输出CIImage后,我们需要将其转换为CGImage(然后我可以将其转为UIImage或者画到屏幕上)调用context的createCGImage:fromRect:方法传入CIImage参数将会产生一个CGImageRef,然后这个CGImageRef可以通过调用imageWithCGImage结构体来创建UIImage。

转换为UIImage后,我们将其显示在先前我们添加的image view上。

编译运行项目,你会看到通过sepia tone filter处理过的图片。祝贺你,你成功的运用了CIImage和CIFilters。


123下一页
6

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (6 人)

发表评论

最新评论

引用 jones 2012-7-27 18:10
教程不错
引用 fanhaisong 2012-4-28 17:38
学习了
引用 antbruce10 2012-4-19 15:46
图片选择器选择相簿的图片,打开safari,找到一张图片,点击保存这张图片.问一下,保存路径是什么啊,找不到图片.
引用 ゛Rainわ 2012-3-24 11:21
教程不错
引用 myhapi 2012-3-4 10:00
写的不错,学习啦

查看全部评论(5)

手机版|小黑屋|Archiver| 泰然论坛 ( 蜀ICP备13018980号-2 )

GMT+8, 2017-6-24 13:07 , Processed in 0.015231 second(s), 13 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部