IOSカメラアプリで、フレームのようなフィルタを実装するにはどうしたら良いですか？

Question

swift5

swiftを使ってカメラアプリを作っています。
スマホアプリを作るのは初めてで、調査しながら作っているため知識は浅いです。

現在、カメラアプリにフィルタ機能を実装しようとしています。
よくある、写真にフレーム(額縁)をつけるものです。

あらかじめ作成した画像(フレーム・額縁)をリアルタイムなフィルタとしてアプリに実装したいのですが、どのような方法がありますか？

自分で調べた中に、色味を変えるようなフィルタの実装はたくさんありましたが、画像と組み合わせるものは見つけられなかったのでここで聞かせてもらいます。

検索ワードだけでもありがたいです！よろしくお願いします

Comments

[ch3cooh]

フィルタにも種類がありますが、フレームをつけることに限定すると @TsukubaDepot さんが書かれたように `UIImagePickerController` を使って画像を選択してから合成させるのが最も簡単な方法です。次点では AVCaptureSession を使って自分でカメラ撮影画面を作る方法です。

後者は https://qiita.com/t_okkan/items/f2ba9b7009b49fc2e30a の記事が参考になるかと思います。

Answer 1

撮影中の画像にフォトフレームをオーバーレイする、という話であれば、UIImagePickerControllerの　cameraOverlayViewプロパティに適切なビューをセットすれば使えます（一応動作は確認しました）。

• Apple Developer cameraOverlayView

ネット上の情報はかなり古いものも多く、Objective-Cで記述されたものもかなりありますが、Swiftでの記述は割合そのまま使えますのでどうにかなると思います。

ただし、そのまま重ねても座標がずれてしまいますから、フォトフレームの幅や高さ、表示される画像の中心点とフレームの中心点をそろえる計算や処理が必要です。

ちょっと試した感じだとこんな感じでオーバーレイできます。
カメラ画像と一致させるいいアイデアがないのが悔しいところですが...

---

最初の回答:

撮影した画像にフレームをかさねるのであれば、こんな感じでできそうです。

    let frameView = UIImageView(image: frameImg)
    let baseView = UIImageView(image: baseImg)
    
    // ベースイメージのサイズをフレームに合わせる
    baseView.frame.size = frameView.frame.size
        
    UIGraphicsBeginImageContext(frameImg.size)
              
    let context = UIGraphicsGetCurrentContext()!
    baseView.layer.render(in: context)
    frameView.layer.render(in: context)
        
    let capturedImage = UIGraphicsGetImageFromCurrentImageContext()!
        
    UIGraphicsEndImageContext()

キーワードとしては、まずはUIGraphicsBeginImageContextで調べ始めるのがいいと思います（わたしはそうしました）。

フレーム画像は透過PNG画像を使っています（透過画像を使わないとうまく重ならないと思います）。

上の例では、ベースイメージ（フレームを重ねたい画像）のサイズをフレームのサイズに強引に合わせていますが、実際はもっと適切な処理や、場合によってはクロップ（切り取り）やピンチイン・アウトによる拡大縮小なども必要になるかもしれません。

処理が甘いところがありますが、実行例はこんな感じになります。

上から順番にベースイメージ、フレームのイメージ、合成後の画像です（ちなみに、画像は手持ちの画像とフリー素材を使っています）。

Comments

[TsukubaDepot]

ちなみに、カメラの画像に直接フィルタをかけるのではなく、一旦何らかの画像形式に落としておいて、それに対して合成しています。

[TsukubaDepot]

質問をよくみたらリアルタイムにフレームを重ねる話ですね。ちょっと違いますね。すいません。