質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.35%

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,338

score 21

したいこと

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はまだ設定していません。
イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

以下の参考サイトなどが役に立ちませんでしょうか。
※以下は"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)が生じるかもしれません。 もし問題あれば、別質問とした方が良い回答が得られるかもしれません(お役に立てず申し訳ありませんが。。)

以下サンプルです(上記で1つめに挙げた参考サイトの方法を利用)
ポイントとしては、「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の背景を青色に設定)
Before

余白削除後
After

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/05/08 00:10

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

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

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

    キャンセル

  • 2020/05/08 00:27

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

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

    キャンセル

  • 2020/06/06 22:27

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

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

    キャンセル

  • 2020/06/07 21:19

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る