Friday, October 7, 2022
HomeiOS DevelopmentUtilizing ImageRenderer to Convert SwiftUI Views into Photographs

Utilizing ImageRenderer to Convert SwiftUI Views into Photographs


ImageRenderer is one other new API for SwiftUI that comes with iOS 16. It permits you to simply convert any SwiftUI views into a picture. The implementation could be very easy. You instantiate an occasion of ImageRenderer with a view for the conversion:

You possibly can then entry the cgImage or uiImage property to retrieve the generated picture.

As at all times, I like to show the utilization of an API with an instance. Earlier, we’ve constructed a line chart utilizing the brand new Charts framework. Let’s see the right way to let customers save the chart as a picture within the photograph album and share it utilizing ShareLink.

Revisit the Chart View

swiftui-line-chart

First, let’s revisit the code of the ChartView instance. We used the brand new API of the Charts framework to create a line chart and show the climate knowledge. Right here is the code snippet:

To make use of ImageRenderer, we first refactor this piece of code into a way like this:

Subsequent, we declare a variable to carry the view:

Changing the View into an Picture utilizing ImageRenderer

Now we’re able to convert the chart view into a picture. We’ll add a button named Save to Images for saving the chart view picture within the photograph album.

Let’s implement the button like this:

Within the closure of the button, we create an occasion of ImageRenderer with chartView and get the rendered picture through the use of the uiImage property. Then we name UIImageWriteToSavedPhotosAlbum to save lots of the picture to the photograph album.

Notice: It’s essential to add a key named Privateness – Picture Library Utilization Description within the data.plist earlier than the app can correctly save a picture to the built-in photograph album.

Including a Share Button

swiftui-share-imagerenderer

Earlier, you realized the right way to use ShareLink to current a share sheet for content material sharing. With ImageRenderer, you possibly can simply construct a perform for customers to share the chart view.

For comfort function, let’s refactor the code for picture rendering right into a separate technique:

The generateSnapshot technique converts the chartView into a picture.

Notice: In case you are new to @MainActor, you possibly can try this text.

With this helper technique, we will create a ShareLink like this within the VStack view:

Now while you faucet the Share button, the app captures the road chart and allows you to share it as a picture.

swiftui-weather-chart-imagerenderer

Adjusting the Picture Scale

You might discover the decision of the rendered picture is a bit low. The ImageRenderer class has a property named scale so that you can regulate the size of the rendered picture. By default, its worth is about to 1.0. To generate a picture with a better decision, you possibly can set it to 2.0 or 3.0. Alternatively, you possibly can set the worth to the size of the display screen:

Abstract

The ImageRenderer class has made it very simple to transform any SwiftUI views into a picture. In case your app helps iOS 16 or up, you should use this new API to create some handy options to your customers. Aside from rendering photos, ImageRenderer additionally permits you to render a PDF doc. You possibly can check with the official documentation for additional particulars.

For charts, Apple additionally comes with a extra particular renderer referred to as ChartRenderer for exporting a chart as a picture. Later, we are going to additional look into this class.


Founding father of AppCoda. Writer of a number of iOS programming books together with Starting iOS Programming with Swift and Mastering SwiftUI. iOS App Developer and Blogger. Comply with me at Fb, Twitter and Google+.



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

16 − 13 =

Most Popular

Recent Comments