UIImageViewを特定のサイズでPDF保存する方法

Question

前提・実現したいこと

黄色のUIImageView(ピンクのUIImageVIew含む)をPDFとしてアプリ上で作成し、次のプレビュー画面で表示させたいと思っています。
いろいろなサイトを見たのですが、理解ができず進めません。
ご教授、サンプルコードなどありましたらよろしくお願いします。

pdfを作成するVC↓

  // UserDefaults のインスタンス
    let userDefaults = UserDefaults.standard
    
    func createPdfFromView(aView: UIView, saveToDocumentsWithFileName fileName: String)
    {
        print("プレビュー画面作成開始")
        let pdfData = NSMutableData()
        UIGraphicsBeginPDFContextToData(pdfData, aView.bounds, nil)
        UIGraphicsBeginPDFPage()
        
        guard let pdfContext = UIGraphicsGetCurrentContext() else { return }
        
        aView.layer.render(in: pdfContext)
        UIGraphicsEndPDFContext()
        
        if let documentDirectories = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true).first {
            let documentsFileName = documentDirectories + "/" + fileName
            debugPrint(documentsFileName)
            pdfData.write(toFile: documentsFileName, atomically: true)
            print("プレビュー作成おわり")
            // 保存
            UserDefaults.standard.set(documentsFileName, forKey:"filePath")

        }
    }
    
    
    
    @IBAction func preView(_ sender: UIButton) {
        
        createPdfFromView(aView: canvasView, saveToDocumentsWithFileName: "test")
        
    }

pdfを表示するVC

import UIKit
import PDFKit

class ViewController3: UIViewController {
    
   @IBOutlet weak var pdfView: PDFView!
    

    
    
    override func viewDidLoad() {
        super.viewDidLoad()

        
        let pdfView = PDFView(frame: view.frame)

        
        // 読み込み
        let Path = UserDefaults.standard.string(forKey:"filePath")
        let pdfURL = URL(fileURLWithPath: Path)
      
        
        let document = PDFDocument(url: pdfURL)
        pdfView.document = document
        pdfView.backgroundColor = .lightGray
        
        // PDFの拡大率を調整する
        pdfView.autoScales = true
        // 表示モード
        pdfView.displayMode = .singlePageContinuous
        
        view.addSubview(pdfView)
 
    }
}

###エラー該当箇所

class AppDelegate: UIResponder, UIApplicationDelegate{

Thread 1: signal SIGABRT

補足情報（FW/ツールのバージョンなど）

Swiftのversionは4.1.2
Xcodeのversionは9.4.1

Answer 1

自分が、やってみたら、普通にできましたけど、、、
黄色いviewがviewAです。

保存するものをviewA.boundsに変えたら、
下記のものが保存されました。
NavigationBarがあるためか、位置が多少ずれていますが、
微調整すれば何とかなりそうですよ。
storyboardのviewが並んでる順番が大事だと思います。

Comments

[mimamo]

コードの、変更該当箇所ではないviewのところまで変更していました...。
無事できました！ありがとうございます。
余白もなんとか消すことができました！

とても丁寧に回答してくださりありがとうございます。感謝の気持ちでいっぱいです。本当に助かりました！

Answer 2

https://teratail.com/questions/89459

これが参考になりませんか？？？

と書きましたが、自分でやってみると、上記は理解できませんでした(笑)
作ってみると、下記が参考になりました。
https://code.i-harness.com/ja/q/530e5e
ほぼ、コードはそのままです。
出力するものだけ変更した気がします。

iPhoneをiTunesに接続し、Documentsの中を確認して、
ちゃんと出力されていることを確認しました。

また、コンソールにファイルのパスがprintされていると思うので、
それをuserdefaultsにstringとして一旦格納し、保存。
表示ページではそのパスを読み込んで表示させるようにすればきちんと表示されましたよ。

ちなみにmimamoさんのファイルのパス、ファイル名からして保存、読み出しでズレてますよ。
それではいくらコードが合ってても表示されないですね。

教えておきながらですが、
https://qiita.com/morimorim/items/301cd85f83523b3bb56e　の情報は不要です。

UserDefaultsに保存して、下記のサイトのローカルの場合のとこに呼び出し、表示できますよ。
https://qiita.com/ninten320/items/7fbb46e350a44288b933

/////////////////////////////
以下、追記1/9

let pdfData = NSMutableData()
UIGraphicsBeginPDFContextToData(pdfData, self.view.bounds, nil)
UIGraphicsBeginPDFPage()
        
guard let pdfContext = UIGraphicsGetCurrentContext() else { return }
self.view.layer.render(in: pdfContext)
UIGraphicsEndPDFContext()

if let documentDirectories = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true).first {
    let documentsFileName = documentDirectories + "/test.pdf"
    UserDefaults.standard.set(documentsFileName, forKey:"filePath")
    debugPrint(documentsFileName)
    pdfData.write(toFile: documentsFileName, atomically: true)
}

Comments

[mimamo]

ご回答ありがとうございます。
頂いた資料のリンク先からコーディングしてみました。
https://stackoverflow.com/questions/5443166/how-to-convert-uiview-to-pdf-within-ios

@IBAction func preView(_ sender: UIButton) {

print("プレビュー画面作成開始")

let pdfData = NSMutableData()
UIGraphicsBeginPDFContextToData(pdfData, getphoto.bounds, nil)
UIGraphicsBeginPDFPage()

guard let pdfContext = UIGraphicsGetCurrentContext() else { return }

getphoto.layer.render(in: pdfContext)
UIGraphicsEndPDFContext()

if let documentDirectories = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true).first {
let documentsFileName = documentDirectories + "/" + "/preview.pdf"
debugPrint(documentsFileName)
pdfData.write(toFile: documentsFileName, atomically: true)
}
print("プレビュー作成おわり")
}

printはできるのですが、作成したpdfの扱い・確認方法がわからず戸惑っています...。

[hameji001]

おそらく、出力されて、documetDicrectoryに保存されている状態です。
これを表示するには、
①別画面(UIViewController)を作成し表示するページを作りましょう。
②ボタンを押して、保存後された後に、表示ページに遷移するようにperformSegueとIDをセット
③表示するページで、下記を参考に表示してみる、でできると思います。
ファイルのパス取得　https://qiita.com/morimorim/items/301cd85f83523b3bb56e
PDFの表示　https://qiita.com/ninten320/items/7fbb46e350a44288b933

他にもiTunesを利用し、PCと繋いでdocumentsの中をみることができます。
その方法でもきちんと作成されたか確認できると思います。

自分の環境で実際に手を動かしてないので、保証はできませんが、
もし詰まるようだったら、また聞いてください。

[mimamo]

お返事ありがとうございます！
③の部分で理解ができず進めない状態にあります。
質問本文の方にコーディングしたものを載せているのですが、
頂いた資料を新しく作ったUIViewControllerにただそのまま書き写すことしかできませんでした...。

[hameji001]

上記の回答を変更させていただきます。
ご確認ください。

[mimamo]

ありがとうございます！
実機でもpdfの確認ができるということなのですが、どこにあるのか見つけることが出来なかったので確認の仕方を教えて頂けないでしょうか。

コードを変えてみました。しかしエラーをどう正せばいいのか分かりません...。よろしくお願いします。
(質問本文のコードを変更しています。)

[hameji001]

何か勘違いしていませんか？
imageviewが貼ってあるViewControllerで保存＋遷移
遷移した先にpreviewのViewControllerを用意して、そこに表示するです。
なので、実機で確認と言ってもfinderみたいにリストで見えるわけではないですよ？
pdfビュアーのように表示されるってことです。

概ね示したページのコードができているなら、
①まず、作ったPDFファイルのパスを
stringとしてUserdefaultsに保存するように変更。
(コンソールに出力されているもの)
②そして表示するViewControllerで、そのStringを取り出して、
pdfのURLにセットしてあげる必要があります。

mimamoさんのコードでは
②userdefaultsから取り出してますが、使ってなくないですか？？？
①がきちんと保存されているのかはわかりませんが。
②の意味をよく考えて、再トライしてください。

[mimamo]

勘違いしていました。
やはりコーディングさせて確認する方法しかないのですね。

頂いたアドバイスを参考にいろいろやってみたのですが、どのようにURLにセットすればいいのかわからず、エラーが出て落ちてしまいます。

他に参考にしたもの
https://qiita.com/takassh/items/1e32e44aa090975f2df9
質問本文のコードを変更させていただいております。
よろしくお願いいたします。

[hameji001]

// 保存
let documentsFileName = documentDirectories + "/test.pdf"
UserDefaults.standard.set(documentsFileName, forKey:"filePath")

// 読み込み
let filePath0 = UserDefaults.standard.string(forKey:"filePath")
let pdfURL = URL(fileURLWithPath: filePath0!)

ちなみにiPhoneをMacに接続した状態で、
iTunesからアプリで保存したファイル一覧を見ること、
デスクトップなどに取り出す事(その後Macで開けます)はできますよ。

[mimamo]

無事pdf表示することができました！
pdfの拡張子にし、URLにパスを入れる時 ! をしていませんでした。

実機と接続することでパソコンにデータを移動することはできるのですね。調べたらやり方も出てきました。

あともうひとつお伺いしたいことがあります...。
このコードだとひとつのUIViewやUIImageしかpdf表示ができませんでした。上の写真にあるような、黄色のUIImageViewと黄色のUIImageVIewに乗っかっているピンクのUIImageVIewを一緒に(合成したように)pdf保存することはできないのでしょうか。
調べてもこれといったものを見つけることができなかったので、２つのUIImageViewを合成し、その後合成してできたUIImageViewをpdf化する方がいいのかなと今思っております。
よろしくお願いいたします。

[hameji001]

自分のコードでは両方が表示されたい状態、
iPhoneの画面に表示された状態でpdfにすることできましたよ。

保存するあたりのコードがおかしいのではないでしょうか？
最初の答えのところに自分のコードを載せておきます。

なお、「!」などのエラーはXcodeの指摘がはいりませんか？
自分もnilのオプショナルを考えるのが不得意で、
完全にXcodeの指摘頼りです。
「?か!を足してこの警告をサイレンスしますか？」
って出るので、大抵「!」を選ぶようにしてますよ。
Xcodeのいうことは聞きましょう

[mimamo]

ありがとうございます。
コードは合っているようでした。頂いたコードを変更せずに実行すると、画面全体をpdfにすることができました！　ですが全体をpdf化するのではなく、特定の範囲のみをpdf化できるようにしたいと思っています。
view▶︎canvasview→黄色のUIImageView→ピンクのUIImageViewの順にstoryboardで配置しているのですが、canvasviewに変更すると白紙になってしまいました。なので、黄色のImageViewをピンクのImageViewの親?にするか、canvasviewを２つのUIImageViewの親viewにすればいいのではと思いました。コーディングをやってみたのですが、なにか違う気がするし上手くいきませんでした...。

// ピンクImageを黄色Imageに追加.
self.黄色Image.addSubview(ピンクImage)
同様にcanvasuviewにも二つのUIImageViewを追加したりしてみました。

エラーは上記のものだけで、そのとき
let pdfURL = URL(fileURLWithPath: filePath0!)
のfileURLWithPathがnilというものに気づけませんでした。以後同じようなエラーが出た場合はUIが上手くリンクしていなのか、もしくはどこかにnilがあるのかを考えていこうと思います。
よろしくお願いします。

[hameji001]

試してませんが、考え方は正しそうな気がしますが、、、
canvasViewにImageViewをaddSubViewすれば、
canvasVIewを保存すれば大丈夫な気がしますよね。
また時間がある時にこっちも試してみます。
頑張ってください。