Convert drawing to an Image with PencilKit in SwiftUI

Question

I have this simple View in SwiftUI and have implemented PencilKit for the signing of a user. My question is, how can I create an image from the drawing of the user.

import SwiftUI
import PencilKit




struct ContentView : View {

    var body: some View {
        VStack {
            Text ("Sign here:")
            PenKitRepre()
                .frame(height: 80.0)
                .border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/, width: 10)
            Button(action: {


            }) {
                Text("Save")
            }
        }

    }
}
struct PenKitRepre : UIViewRepresentable {
    func makeUIView(context: Context) -> PKCanvasView {
        return PKCanvasView();
    }

    func updateUIView(_ uiView: PKCanvasView, context: Context) {

    }
}

The image should not be stored to the camera roll

score 0 · Answer 1 · answered Feb 02 '20 at 04:20

0

you can get the image of the user drawings like this, for example:

let imgRect = CGRect(width: 400, height: 80) 
let image = canvasView.drawing.image(from: imgRect, scale: 1.0)

answered Feb 02 '20 at 04:20

workingdog support Ukraine

26,280
4
27
37

How do you know the image rect though? – P1xelfehler Nov 04 '20 at 11:14

score 0 · Answer 2 · answered Mar 23 '23 at 17:38

In most cases, the preferred image size should include the entire drawing area. To do that, create a drawing size and use that size to set both the image size and the canvas's content size.

Create a drawing size:

@State var drawingSize: CGSize = CGSize(width: 350, height: 80)

Set the image size using that drawing size and then save the image:

let imgRect = CGRect(origin: CGPoint.zero, size: drawingSize)
image = canvasView.drawing.image(from: imgRect, scale: 1.0)

Set the content size:

canvasView.contentSize = drawingSize

To display the full image in the proper aspect:

    Image(uiImage: image)
        .resizable()
        .aspectRatio(drawingSize, contentMode: .fit)

This is an example of a signature being saved:

The example code enhanced:

import SwiftUI
import PencilKit

struct ContentView : View {
    
    @State var canvasView = PKCanvasView()
    @State var drawingSize: CGSize = CGSize(width: 350, height: 80)
    @State var image: UIImage = UIImage()
    
    var body: some View {
        VStack {
            Image(uiImage: image)
                .resizable()
                .aspectRatio(drawingSize, contentMode: .fit)
                .frame(height: 100)
            
            Text ("Sign here:")
            PenKitRepre(canvasView: $canvasView, drawingSize: $drawingSize)
                .frame(width: drawingSize.width, height: drawingSize.height)
                .border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/, width: 10)
            
            Button(action: {
                let imgRect = CGRect(origin: CGPoint.zero, size: drawingSize)
                image = canvasView.drawing.image(from: imgRect, scale: 1.0)
            }) {
                Text("Save")
            }
        }
    }
}


struct PenKitRepre : UIViewRepresentable {
    @Binding var canvasView: PKCanvasView
    @Binding var drawingSize: CGSize
    
    func makeUIView(context: Context) -> PKCanvasView {
        canvasView.tool = PKInkingTool(.pen, color: .black, width: 3)
        canvasView.drawingPolicy = .anyInput
        canvasView.contentSize = drawingSize
        return canvasView
    }
    
    func updateUIView(_ uiView: PKCanvasView, context: Context) {
        
    }
}

Convert drawing to an Image with PencilKit in SwiftUI

2 Answers2