iOS Development
UIView
UIImage
Swift Programming
Mobile App Development

How to convert a UIView to an image

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

Introduction

Converting a UIView into a UIImage is a common iOS task for sharing content, exporting drawings, or capturing a styled interface snapshot. The modern approach is to use UIGraphicsImageRenderer, make sure the view has laid out its contents, and choose the right rendering method for the effect you want.

The modern Swift approach

For most cases, UIGraphicsImageRenderer is the cleanest API:

swift
1import UIKit
2
3extension UIView {
4    func asImage() -> UIImage {
5        layoutIfNeeded()
6
7        let renderer = UIGraphicsImageRenderer(bounds: bounds)
8        return renderer.image { _ in
9            drawHierarchy(in: bounds, afterScreenUpdates: true)
10        }
11    }
12}

This captures the rendered appearance of the view and returns it as a UIImage.

Why layoutIfNeeded() matters

If Auto Layout has not finished updating frames, the captured image may be incomplete, shifted, or the wrong size. Calling layoutIfNeeded() before rendering ensures the view hierarchy is in its final layout state.

That detail is easy to miss when the view is configured programmatically and captured immediately afterward.

drawHierarchy versus layer.render

There are two common ways to draw the view into the renderer.

Using drawHierarchy:

swift
let image = renderer.image { _ in
    drawHierarchy(in: bounds, afterScreenUpdates: true)
}

Using Core Animation layer rendering:

swift
let image = renderer.image { context in
    layer.render(in: context.cgContext)
}

drawHierarchy usually captures what the user sees on screen more accurately, especially for visual effects and complex UIKit rendering. layer.render can be useful for simpler content, but it may not reproduce every effect exactly the same way.

Capturing a specific size

If you need an image at a custom size, render into a dedicated bounds rectangle rather than assuming the current frame is already correct:

swift
1func asImage(size: CGSize) -> UIImage {
2    let format = UIGraphicsImageRendererFormat.default()
3    let renderer = UIGraphicsImageRenderer(size: size, format: format)
4
5    return renderer.image { _ in
6        drawHierarchy(in: CGRect(origin: .zero, size: size), afterScreenUpdates: true)
7    }
8}

This is useful when exporting content for sharing or generating thumbnails.

Transparency and retina scale

UIGraphicsImageRenderer handles screen scale well by default, which is one reason it replaced older bitmap-context APIs for most app code. If the view contains transparency, make sure you do not accidentally force an opaque background elsewhere in your rendering pipeline.

For most normal view snapshots, the default renderer format is the right choice.

Large views and offscreen content

If the view contains a scroll view, remember that the snapshot only captures the current rendered bounds unless you intentionally resize the content and render a larger rectangle. That matters when you want to export the full scrollable content instead of only the visible portion.

Performance matters too. Rendering a very large view into an image can allocate a large bitmap, so it is worth keeping export size under control if the snapshot is used only for thumbnails, previews, or sharing.

Common Pitfalls

  • Capturing the view before Auto Layout has produced the final frames.
  • Using layer.render and expecting every visual effect to match the on-screen result.
  • Forgetting that the captured image reflects the current bounds, not some ideal export size you never set.
  • Trying to snapshot views before they contain their final data or subviews.

Summary

  • Use UIGraphicsImageRenderer for modern UIView to UIImage conversion.
  • Call layoutIfNeeded() before rendering so the snapshot uses final layout values.
  • Prefer drawHierarchy when you want the image to match the visual appearance on screen.
  • Control the render bounds explicitly when you need a custom export size.

Related reading
Free course
Beginner
7 lessons
2 hours
Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course
Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

All Rights Reserved.