Используем ImageRenderer в SwiftUI

Когда я только начал публиковаться в Twitter, мне не нравилось, как отображаются мои посты, поэтому я создал автоматизированную систему с использованием SwiftUI и GitHub Actions для создания динамических изображений предварительного просмотра для моих еженедельных выпусков. Такой подход экономит время и обеспечивает уникальный, профессиональный вид каждого поста при публикации в сети.

Эта автоматизированная система выходит за рамки этого выпуска, но если вам интересно узнать, как я это сделал, рекомендую ознакомиться со статьей, которую я написал на эту тему. В ней вы шаг за шагом пройдете через весь процесс!

На этой неделе я погружаюсь в ключевой класс, который сделал все это возможным — ImageRenderer. Я покажу вам, как он работает и как вы можете легко интегрировать его в свои приложения!

Обзор

ImageRenderer — это простой инструмент, который может конвертировать представление SwiftUI в различные форматы изображений, такие как CGImage, NSImage или UIImage.

Использовать его очень просто — создайте экземпляр, передайте ему содержимое и запросите вывод изображения.

let renderer = ImageRenderer(content: view)
self.image = renderer.uiImage

Чтобы увидеть, как работает рендерер на рабочем примере, здесь я создам превью-изображение для моих еженедельных выпусков, задавая некоторые свойства, такие как название и номер выпуска.

@main
struct IssuePreview: AsyncParsableCommand {
    [...]
 
    @MainActor mutating func run() async throws {
        [...]
 
        let view = IssueView(
            colors: colors,
            foregroundColor: foreground,
            title: issue.title,
            date: date,
            issueNumber: issue.number
        )
        .frame(width: 1280, height: 640)
 
        guard let image = ImageRenderer(content: view).nsImage else { throw Error.invalidImageData }
        guard let imageData = image.asPNGData else { throw Error.imageCreationFailed }
 
        let folderURL = URL(fileURLWithPath: "issues")
        let fileURL = folderURL.appendingPathComponent("\(issue.number).png")
        try imageData.write(to: fileURL)
    }
}

Вывод

Хотя мне еще предстоит внести некоторые коррективы и улучшения, вот что получилось на данный момент:

Источник