在 iOS 上将文本转换为图像

Question

如何将文本转换为图像并在 UIImageview 中显示。 谁能知道从文本到图像的转换？

Answer 1

使用 Swift 5 和 iOS 12，您可以选择 以下 6 种方式中的一种来解决您的问题。

---

#1。使用NSString的draw(at:withAttributes:)方法

在最简单的情况下，您希望将String 转换为具有某些属性的UIImage，您可以使用draw(at:withAttributes:)。以下 Playground 代码展示了如何使用 draw(at:withAttributes:) 从 String 获取 UIImage：

import UIKit
import PlaygroundSupport

let text = "Hello, world"
let attributes = [
    NSAttributedString.Key.foregroundColor: UIColor.yellow,
    NSAttributedString.Key.font: UIFont.systemFont(ofSize: 22)
]
let textSize = text.size(withAttributes: attributes)

UIGraphicsBeginImageContextWithOptions(textSize, true, 0)
text.draw(at: CGPoint.zero, withAttributes: attributes)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

PlaygroundPage.current.liveView = UIImageView(image: image)

import UIKit
import PlaygroundSupport

let text = "Hello, world"
let attributes = [
    NSAttributedString.Key.foregroundColor: UIColor.yellow,
    NSAttributedString.Key.font: UIFont.systemFont(ofSize: 22)
]
let textSize = text.size(withAttributes: attributes)

let renderer = UIGraphicsImageRenderer(size: textSize)
let image = renderer.image(actions: { context in
    text.draw(at: CGPoint.zero, withAttributes: attributes)
})

PlaygroundPage.current.liveView = UIImageView(image: image)

注意NSAttributedString 有一个类似的方法叫做draw(at:)。

---

#2。使用NSString的draw(in:withAttributes:)方法

作为draw(at:withAttributes:) 的替代品，您可以使用draw(in:withAttributes:)。

import UIKit
import PlaygroundSupport

let text = "Hello, world"
let attributes = [
    NSAttributedString.Key.foregroundColor: UIColor.yellow,
    NSAttributedString.Key.font: UIFont.systemFont(ofSize: 22)
]
let textSize = text.size(withAttributes: attributes)

UIGraphicsBeginImageContextWithOptions(textSize, true, 0)
let rect = CGRect(origin: .zero, size: textSize)
text.draw(in: rect, withAttributes: attributes)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

PlaygroundPage.current.liveView = UIImageView(image: image)

import UIKit
import PlaygroundSupport

let text = "Hello, world"
let attributes = [
    NSAttributedString.Key.foregroundColor: UIColor.yellow,
    NSAttributedString.Key.font: UIFont.systemFont(ofSize: 22)
]
let textSize = text.size(withAttributes: attributes)

let renderer = UIGraphicsImageRenderer(size: textSize)
let image = renderer.image(actions: { context in
    let rect = CGRect(origin: .zero, size: textSize)
    text.draw(in: rect, withAttributes: attributes)
})

PlaygroundPage.current.liveView = UIImageView(image: image)

注意NSAttributedString 有一个类似的方法叫做draw(in:)。

---

#3。使用NSString的draw(with:options:attributes:context:)方法

作为draw(at:withAttributes:) 和draw(in:) 的替代品，您可以使用draw(with:options:attributes:context:)。请注意，Apple 对draw(with:options:attributes:context:) 有一些建议：

此方法默认使用基线原点。 如果不指定usesLineFragmentOrigin，则忽略矩形的高度，将操作视为单行渲染。

import UIKit
import PlaygroundSupport

let text = "Hello, world"
let attributes = [
    NSAttributedString.Key.foregroundColor: UIColor.yellow,
    NSAttributedString.Key.font: UIFont.systemFont(ofSize: 22)
]
let textSize = text.size(withAttributes: attributes)

UIGraphicsBeginImageContextWithOptions(textSize, true, 0)
let rect = CGRect(origin: .zero, size: textSize)
text.draw(with: rect, options: [.usesLineFragmentOrigin], attributes: attributes, context: nil)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

PlaygroundPage.current.liveView = UIImageView(image: image)

import UIKit
import PlaygroundSupport

let text = "Hello, world"
let attributes = [
    NSAttributedString.Key.foregroundColor: UIColor.yellow,
    NSAttributedString.Key.font: UIFont.systemFont(ofSize: 22)
]
let textSize = text.size(withAttributes: attributes)

let renderer = UIGraphicsImageRenderer(size: textSize)
let image = renderer.image(actions: { context in
    text.draw(with: .zero, options: [.usesLineFragmentOrigin], attributes: attributes, context: nil)
})

PlaygroundPage.current.liveView = UIImageView(image: image)

注意NSAttributedString 有一个类似的方法叫做draw(with:options:context:)。

---

#4。使用CALayer的render(in:)方法

如果要将UILabel、UITextField 或UITextView 的文本捕获到UIImage，可以使用render(in:)。以下 Playground 代码展示了如何使用 render(in:) 对 UILabel 的内容文本进行快照：

import UIKit
import PlaygroundSupport

let label = UILabel(frame: .zero)
label.textColor = .yellow
label.font = UIFont.systemFont(ofSize: 22)
label.text = "Hello, world"
label.sizeToFit()

UIGraphicsBeginImageContextWithOptions(label.frame.size, true, 0)
guard let context = UIGraphicsGetCurrentContext() else { exit(0) }
label.layer.render(in: context)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

PlaygroundPage.current.liveView = UIImageView(image: image)

import UIKit
import PlaygroundSupport

let label = UILabel(frame: .zero)
label.textColor = .yellow
label.font = UIFont.systemFont(ofSize: 22)
label.text = "Hello, world"
label.sizeToFit()

let renderer = UIGraphicsImageRenderer(size: label.frame.size)
let image = renderer.image(actions: { context in
    label.layer.render(in: context.cgContext)
})

PlaygroundPage.current.liveView = UIImageView(image: image)

---

#5。使用UIView的drawHierarchy(in:afterScreenUpdates:)方法

如果要将UILabel、UITextField 或UITextView 的文本捕获到UIImage，可以使用drawHierarchy(in:afterScreenUpdates:)。请注意，Apple 对drawHierarchy(in:afterScreenUpdates:) 有一些建议：

当您想要将图形效果（例如模糊）应用到视图快照时，请使用此方法。此方法不如snapshotView(afterScreenUpdates:) 方法快。

import UIKit
import PlaygroundSupport

let label = UILabel(frame: .zero)
label.textColor = .yellow
label.font = UIFont.systemFont(ofSize: 22)
label.text = "Hello, world"
label.sizeToFit()

UIGraphicsBeginImageContextWithOptions(label.frame.size, true, 0)    
_ = label.drawHierarchy(in: label.bounds, afterScreenUpdates: true)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

PlaygroundPage.current.liveView = UIImageView(image: image)

import UIKit
import PlaygroundSupport

let label = UILabel(frame: .zero)
label.textColor = .yellow
label.font = UIFont.systemFont(ofSize: 22)
label.text = "Hello, world"
label.sizeToFit()

let renderer = UIGraphicsImageRenderer(size: label.frame.size)
let image = renderer.image(actions: { context in
    _ = label.drawHierarchy(in: label.bounds, afterScreenUpdates: true)
})

PlaygroundPage.current.liveView = UIImageView(image: image)

---

#6。使用UIView的snapshotView(afterScreenUpdates:)方法

如果您可以从快照操作中获取UIView 而不是UIImage，则可以使用snapshotView(afterScreenUpdates:)。以下 Playground 代码展示了如何使用 snapshotView(afterScreenUpdates:) 将 UILabel 的内容文本快照到 UIView：

import UIKit
import PlaygroundSupport

let label = UILabel(frame: .zero)
label.textColor = .yellow
label.font = UIFont.systemFont(ofSize: 22)
label.text = "Hello, world"
label.sizeToFit()

let view = label.snapshotView(afterScreenUpdates: true)
PlaygroundPage.current.liveView = view

Answer 2

SWIFT 3：

为 UIImage 创建一个扩展，以便您可以在任何地方使用它：

extension UIImage {
    class func imageWithLabel(label: UILabel) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(label.bounds.size, false, 0.0)
        label.layer.render(in: UIGraphicsGetCurrentContext()!)
        let img = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return img!
   }
}

现在您需要使用它从 Text 创建图像：

//这个标签的自定义是根据你需要什么字体，你需要什么背景颜色。随意更改。

let label = UILabel(frame: CGRect(x: 0, y: 0, width: 300, height: 20))
label.numberOfLines = 0
label.textAlignment = .center
label.textColor = UIColor.white
label.backgroundColor = UIColor.black
label.font = UIFont(name: "Montserrat", size: 17)
label.text = "YOUR TEXT HERE"
label.sizeToFit()
let image = UIImage.imageWithLabel(label: label)

Answer 3

[yourImageView addSubview:textView]; [canvas addSubview:passingImageView];

UIGraphicsBeginImageContext(canvas.bounds.size);
[canvas.layer renderInContext:UIGraphicsGetCurrentContext()];

UIImage *resultingImage = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();
return resultingImage;

你应该取一个 UIView 并在里面取 UIImageview，上面的代码应该可以解决问题。这里的画布是 UIView。

Answer 4

你可以开始玩这样的事情：

NSString *string = @"Some text";
UIGraphicsBeginImageContext(CGSizeMake(80, 50));
[string drawAtPoint:CGPointMake(10, 20)
           withFont:[UIFont systemFontOfSize:12]];
UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

result 包含带有文本的 UIImage，您可以将其分配给 UIImageView image 属性。