UILabelとUIImageViewを合成?して、１つの画像として書き出したい。

Question

したいこと

UIImageViewで読み込んでいる画像と、その上にあるUILabelを一つの画像として書き出したいです。

試したこと

さまざまな記事など読み、試しましたがあまり良くわからず、結果的に実装できていません。

コード

import UIKit

class EditViewController: UIViewController, UIImagePickerControllerDelegate & UINavigationControllerDelegate {
    
    @IBOutlet weak var imageLabel: UILabel!
    @IBOutlet weak var fontSlider: UISlider!
    @IBOutlet weak var pictureView: UIImageView!
    //    @IBOutlet weak var OpacitySlider: UISlider! // 不透明度のSlider 今後のUPD対象
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Screen Size の取得
        let screenWidth:CGFloat = view.frame.size.width
        let screenHeight:CGFloat = view.frame.size.height
        
        // Labelのフレームを設定
        imageLabel.frame = CGRect(x:0, y:0, width:343, height:110)
        
        // Labelをスクリーン中央に設定
        imageLabel.center = CGPoint(x:screenWidth/2, y:screenHeight/2)
        
        // タッチ操作を enable
        imageLabel.isUserInteractionEnabled = true
        
        self.view.addSubview(imageLabel)
      
        
        // Do any additional setup after loading the view.
    }
    

    
    // 画面にタッチで呼ばれる
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        print("touchesBegan")
        
    }
    
    //　ドラッグ時に呼ばれる
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        // タッチイベントを取得
        let touchEvent = touches.first!
        
        // ドラッグ前の座標, Swift 1.2 から
        let preDx = touchEvent.previousLocation(in: self.view).x
        let preDy = touchEvent.previousLocation(in: self.view).y
        
        // ドラッグ後の座標
        let newDx = touchEvent.location(in: self.view).x
        let newDy = touchEvent.location(in: self.view).y
        
        // ドラッグしたx座標の移動距離
        let dx = newDx - preDx
        print("x:(dx)")
        
        // ドラッグしたy座標の移動距離
        let dy = newDy - preDy
        print("y:(dy)")
        
        // 画像のフレーム
        var viewFrame: CGRect = imageLabel.frame
        
        // 移動分を反映させる
        viewFrame.origin.x += dx
        viewFrame.origin.y += dy
        
        imageLabel.frame = viewFrame
        
        self.view.addSubview(imageLabel)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
    
    @IBAction func EditText(_ sender: Any) {
        
　　　
　　// ＜　省略　＞


    }
    
    @IBAction func fontSliderAction(_ sender: UISlider) {
        print(sender.value)
        
        imageLabel.font = imageLabel.font.withSize(CGFloat(Int(sender.value)))
        
    }
    
    
    
    
    @IBAction func Save(_ sender: UIBarButtonItem) {
    
        
    }
    
    
    
    
    @IBAction func addButton(_ sender: Any) {
      

    // ＜　省略　＞

　　}
    
    
}

ストーリーボードは以下のような感じです。
　

補足

Xcode 11.4.1
Development target iOS 12.0

些細なことやアドバイス、記事などでも構いませんので、ご教授よろしくお願いいたします...

[追記 2020/06/06]

コメント欄でご指摘いただいた、self.view.addSubview(imageLabel)をimageView.addSubview(lblView)に修正することで、
文字と写真の合成をすることができました。

フォトライブラリ等から取得した画像を保存する際に、
現在はUIImageViewのいらない部分（わかりやすくするために青くしています)も一緒に保存されてしまうので、（以下1枚目の画像）
フォトライブラリ等から取得した段階で、取得した画像にUImageViewの縦横比を合わせるなどの処理をした上で保存したいと思っています。（イメージ画像、以下2枚目のもの）

現在のUIImageViewのサイズ設定は以下の通りです。
今のところ、AutoLayoutはまだ設定していません。

Answer 1

以下の参考サイトなどが役に立ちませんでしょうか。
※以下は"drawHierarchy"メソッドを利用するパターンとなりますので、ImageView上にLabelが乗っかっていないと上手く動作しないと思います。
（"drawHierarchy"以外の合成に関しては、"draw"や"render"メソッドなどで検索すると他の情報が出るかもしれません）

画面中央のスクリーンショットを撮りたい。
コピペでできるSwiftでスクリーンショットを撮る

・ViewController全体のサンプル

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!       // 合成用ImageView
    @IBOutlet weak var lblView: UILabel!             // 合成用Label
    @IBOutlet weak var resultImageView: UIImageView! // 合成結果表示用ImageView
        
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // LabelをImageView上に追加する
        imageView.addSubview(lblView)
        lblView.frame = CGRect(x: 0, y: 0, width: lblView.bounds.size.width, height: lblView.bounds.size.height)
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        // 画面表示時と同時にViewを合成
        self.resultImageView.image = self.takeScreenShot()
    }
    
    // Viewの合成処理(キャプチャ取得処理)
    private func takeScreenShot() -> UIImage {
        // コンテキスト開始
        UIGraphicsBeginImageContextWithOptions(self.imageView.bounds.size, false, 0.0)
        
        // ImageView(ImageView上のView含む)を書き出す
        self.imageView.drawHierarchy(in: self.imageView.bounds, afterScreenUpdates: true)

        // newImageに、コンテキストの内容を書き出す
        let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        
        // コンテキストを閉じる
        UIGraphicsEndImageContext()
        
        // Imageを返却
        return newImage
    }
}

---

2020.06.07追記

保存時のサイズ変更（ImageViewの余白部分削除）に関して追記いたします。

以下の参考サイトの方法は使えませんでしょうか。
※どちらも表示時から余白を削除するものなので”保存時”とは異なります。
また、トリミング時に多少の誤差（数px）が生じるかもしれません。
もし問題あれば、別質問とした方が良い回答が得られるかもしれません（お役に立てず申し訳ありませんが。。）

• How to find an aspect fit image’s size inside an image view
• UIImageViewを、カメラロールから取得した画像のアスペクト比の形にしたい

以下サンプルです（上記で１つめに挙げた参考サイトの方法を利用）
ポイントとしては、「extentionの追加」と「self.imageView.frame = self.imageView.contentClippingRect」の部分となります。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!      // 合成対象のImageView
    @IBOutlet weak var lbl: UILabel!                // 合成対象のLabel
    @IBOutlet weak var resultImageView: UIImageView!// 合成結果表示用のImageView
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
                
        // LabelをImageView上に追加する
        imageView.addSubview(lbl)
        
        // 結果表示用ImageViewの枠線設定
        resultImageView.layer.borderWidth = 2
        resultImageView.layer.borderColor = UIColor.red.cgColor
    }

    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        // ImageViewから余白削除
        self.imageView.frame = self.imageView.contentClippingRect
        
        // ImageViewとLabelを合成し、結果表示用のImageViewにImage設定
        self.resultImageView.image = self.takeScreenShot()
    }
    
    // Viewの合成処理(キャプチャ取得処理)
    private func takeScreenShot() -> UIImage {

        // コンテキスト開始
        UIGraphicsBeginImageContextWithOptions(self.imageView.bounds.size, false, 0.0)

        // ImageView(ImageView上のView含む)を書き出す
        self.imageView.drawHierarchy(in: self.imageView.bounds, afterScreenUpdates: true)

        // newImageに、コンテキストの内容を書き出す
        let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()!

        // コンテキストを閉じる
        UIGraphicsEndImageContext()

        // Imageを返却
        return newImage
    }
}

// 参考サイトのextension定義
extension UIImageView {
    var contentClippingRect: CGRect {
        guard let image = image else { return bounds }
        guard contentMode == .scaleAspectFit else { return bounds }
        guard image.size.width > 0 && image.size.height > 0 else { return bounds }

        let scale: CGFloat
        if image.size.width > image.size.height {
            scale = bounds.width / image.size.width
        } else {
            scale = bounds.height / image.size.height
        }

        let size = CGSize(width: image.size.width * scale, height: image.size.height * scale)
        let x = (bounds.width - size.width) / 2.0
        let y = (bounds.height - size.height) / 2.0

        return CGRect(x: x, y: y, width: size.width, height: size.height)
    }
}

余白削除前（分かりやすい様に、ImageViewの背景を青色に設定）

余白削除後

Comments

[rea_sna]

ご回答いただきありがとうございます。
スクリーンショットとして保存することはできましたが、
こちらで試してみたところ、ImageView上にLabelは乗っていますが、保存したものには、表示されていません...

可能であればこちらもアドバイス等いただければと思っているのが、
元画像と同じサイズ（寸法）で保存したいと思っています。

どうかよろしくお願いいたします。

[tsuki01]

ラベルが合成されない件は、"self.view.addSubview(imageLabel)"ではなく、
"pictureView.addSubview(imageLabel)"という風になっていますでしょうか。
"drawHierarchy"を利用する場合、imageView上にきちんとaddSubviewされている状態でないとラベルが合成されないかと思われます。

また「元画像と同じサイズ」の件は、imageViewで表示しているサイズと同じってことでしょうか？
現状のサイズ指定箇所がどうなっているか知りたいので、質問に追記頂くことは可能でしょうか。

[rea_sna]

お返事いただいたにもかかわらず、返信できておらず申し訳ないです。
「pictureView.addSubview(imageLabel)」に１箇所修正されていない箇所がありました。
修正したところ、無事に合成することができました。

また「元画像と同じサイズ」の件は、imageViewで表示しているサイズと同じってことでしょうか？
>>このことですが、PickedImageの縦横比に合わせて、UIImageViewの縦横比を変え、保存したい、ということです...　念のため追記しますね。

[tsuki01]

回答追記いたしました。
追記部分でも書きましたが、求めている回答とずれている場合は別質問の方が良い回答が得られるかもしれません。お役に立てず申し訳ありません。