画像に描いた線を含めて画像を保存

Question

PencilKitを用いて画像に描くアプリを作っています。画像の保存はできるのですが、PencilKitを用いて描いた線が反映されません。どこに不備や間違いがあるかご教示いただきたいです。

import UIKit
import PencilKit

class PencilViewController: UIViewController, PKCanvasViewDelegate {
    
        private lazy var canvasView: PKCanvasView = setupCanvasView()
        private lazy var imageView: UIImageView = setupImageView()
        
        override func viewDidLoad() {
            super.viewDidLoad()
            // Do any additional setup after loading the view.
            self.canvasView.addSubview(self.imageView)
            self.canvasView.sendSubviewToBack(self.imageView)
            self.view.addSubview(self.canvasView)
            
            navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Save To Photo", style: .plain, target: self, action: #selector(save))
            
        }
        func scrollViewDidZoom(_ scrollView: UIScrollView) {
            if scrollView == self.canvasView {
                self.imageView.frame.size = CGSize(width: self.view.frame.width * scrollView.zoomScale, height: self.view.frame.height * scrollView.zoomScale)
                self.imageView.center = CGPoint(x: scrollView.contentSize.width / 2, y: scrollView.contentSize.height / 2)
            }
        }
        private func setupCanvasView() -> PKCanvasView {
            let canvasView: PKCanvasView = PKCanvasView(frame: self.view.frame)
            canvasView.delegate = self
            canvasView.maximumZoomScale = 5.0
            canvasView.isOpaque = false
            canvasView.backgroundColor = .clear
            canvasView.contentOffset = CGPoint.zero
            canvasView.contentSize = self.view.frame.size
            canvasView.tool = PKInkingTool(.pen, color: .black, width: 30)
            // PKToolPicker: ドラッグして移動できるツールパレット (ペンや色などを選択できるツール)
            if let window = UIApplication.shared.windows.first {
                if let toolPicker = PKToolPicker.shared(for: window) {
                    toolPicker.addObserver(canvasView)
                    toolPicker.setVisible(true, forFirstResponder: canvasView)
                    canvasView.becomeFirstResponder()
                }
            }
            return canvasView
        }
        private func setupImageView() -> UIImageView {
            let imgView = UIImageView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height))
            imgView.image = UIImage(named: "Blackboard 英語")
            imgView.contentMode = UIView.ContentMode.scaleAspectFit
            return imgView
        }
    
    
    @IBAction func save(_ sender: UIBarButtonItem) {
        
        let image:UIImage! = imageView.image
        
        if image != nil {
            
            UIImageWriteToSavedPhotosAlbum(image,
                                            self, #selector(PencilViewController.image(_:didFinishSavingWithError:contextInfo:)),
                                            nil)
            
             print("アルバム保存　開始")
        }else{
        }
    }
    // Album save 結果
    @objc func image(_ image: UIImage,
                     didFinishSavingWithError error: NSError!,
                     contextInfo: UnsafeMutableRawPointer) {
        
        if error != nil {
        }else{
            print("アルバム保存　終了")
        }
    }
    }

Comments

[y_waiwai]

このままではコードが読みづらいので、質問を編集し、<code>ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください

[as0408]

ご指摘ありがとうございます。

[tsuki01]

現在はImageViewの画像しか保存していないため、描画内容が反映されていないのではないでしょうか。
描画内容はあくまで「PKCanvasView」が保持していると思うので、以下手順などでImageを合成してから保存するのはいかがでしょうか。

１、UIImageViewからImageを抽出
２、PKCanvasViewから、描画内容をImageとして抽出
３、上記の１・２のImageを合成して保存

もしくは以下参考URLの様に、特定のView上をすべてキャプチャしてしまうなど。
https://qiita.com/tatetate55/items/a31dcb6944b3f068bdd4

[as0408]

できました！ありがとうございます！！

Answer 1

Answer 2

tsuki01さんからのコメントにより解決。
いただいた参考URL
https://qiita.com/tatetate55/items/a31dcb6944b3f068bdd4