SwiftUI Image如何使用UIImage CGImage CIImage

苹果提供的图片对象

  • UIImage,它来自UIKit。这是一种非常强大的图像类型,能够处理各种图像类型,包括位图(如PNG),矢量(如SVG),甚至是形成动画的序列。 UIImage是UIKit的标准图像类型,在三种类型中,它最接近SwiftUI的图像类型。
  • CGImage,来自Core Graphics。这是一种更简单的图像类型,实际上只是一个二维像素阵列。
  • CIImage,来自Core Image。它将存储生成图像所需的所有信息,但实际上不会将其转换为像素(除非要求)。苹果将​​CIImage称为“图像配方”,而不是实际图像。

各种图像类型之间存在一些互操作性

  • 我们可以从CGImage创建UIImage,并从UIImage创建CGImage。
  • 我们可以从UIImage和CGImage创建CIImage,也可以从CIImage创建CGImage。
  • 我们可以从UIImage和CGImage创建一个SwiftUI图像。

SwiftUI和图像们的关系

这些图像类型是纯数据对象,我们无法将它们放入SwiftUI视图层次结构中,但是我们可以自由地对其进行操作,然后将结果呈现在SwiftUI图像中。

我们将更改loadImage(),以便它从示例图像中创建一个UIImage,然后使用Core Image对其进行操作。更具体地说,我们将从两项任务开始:

func loadImage() {
    guard let inputImage = UIImage(named: "Example") else { return }
 // 将UIImage转换为CIImage
    let beginImage = CIImage(image: inputImage)

    // 下面我们可以使用Core Image库进行图像处理
}

下一步将创建一个Core Image上下文和一个Core Image过滤器。过滤器是完成以某种方式转换图像数据的实际工作的东西,例如模糊,锐化,调整颜色等,上下文则将处理后的数据转换为我们可以使用的CGImage。

这两种数据类型均来自Core Image,因此您需要添加两次导入才能将其提供给我们。因此,请先在ContentView.swift顶部附近添加以下内容:

import CoreImage
import CoreImage.CIFilterBuiltins

接下来,我们将创建上下文并进行过滤。在此示例中,我们将使用棕褐色调滤镜,该滤镜会应用棕色调,使照片看起来像是很久以前拍摄的。

因此,替换//更多代码以对此进行注释:

let context = CIContext()
let currentFilter = CIFilter.sepiaTone()

现在,我们可以自定义过滤器以更改其工作方式。棕褐色是一个简单的滤镜,因此它只有两个有趣的属性:inputImage是我们要更改的图像,而强度是应该应用棕褐色效果的强度,在0(原始图像)和1(完整棕褐色)的范围内指定。

因此,在前两行下面添加以下两行代码:

currentFilter.inputImage = beginImage
currentFilter.intensity = 1

所有这些都不是很难的,但是这里发生了改变:我们需要将过滤器的输出转换为可以在视图中显示的SwiftUI图像。这是我们需要一次依靠所有四种图像类型的地方,因为最简单的操作是:

从我们的过滤器读取输出图像,它将是CIImage。这可能会失败,因此它返回一个可选。
询问我们的上下文,从该输出图像创建CGImage。这也可能会失败,因此再次返回一个可选。
将该CGImage转换为UIImage。
将该UIImage转换为SwiftUI图像。
您可以直接从CGImage转到SwiftUI图像,但它需要额外的参数,并且只会增加更多的复杂性!

这是loadImage()的最终代码:

// get a CIImage from our filter or exit if that fails
guard let outputImage = currentFilter.outputImage else { return }

// attempt to get a CGImage from our CIImage
if let cgimg = context.createCGImage(outputImage, from: outputImage.extent) {
    // convert that to a UIImage
    let uiImage = UIImage(cgImage: cgimg)

    // and convert that to a SwiftUI image
    image = Image(uiImage: uiImage)
}

如果再次运行该应用程序,您应该会看到示例图像现在已应用了棕褐色效果,这全归功于Core Image。

现在,您可能会认为,要获得一个相当简单的结果,这是一件繁琐的工作,但是现在您已经掌握了Core Image的所有基础知识,因此切换到其他过滤器相对容易。

我们需要将示例图像加载到UIImage中,该图像具有一个名为UIImage(name :)的初始化程序,以从资产目录中加载图像。它返回一个可选的UIImage,因为我们可能指定了不存在的图像。
我们将其转换为CIImage,这是Core Image想要使用的。
因此,首先用以下代码替换当前的loadImage()实现:

推荐

基础文章推荐

经典教程推荐

技术源码推荐

推荐文章

CoreData篇

Combine篇

TextField篇

JSON文件篇


一篇文章系列

技术交流

QQ:3365059189
SwiftUI技术交流QQ群:518696470

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