How to merge two Images in SwiftUI

Question

I'd like to do what this guy was trying to do but in SwiftUI. How can I convert the code in the answers to apply it to SwiftUI?

This is what I have tried so far:

struct ImageMerger {
func merge(_ bottomImageName: String, with topImageName: String) -> UIImage {
    let bottomImage = UIImage(named: bottomImageName)
    let topImage = UIImage(named: topImageName)

    let size = CGSize(width: 375, height: 245)
    UIGraphicsBeginImageContext(size)

    let areaSize = CGRect(x: 0, y: 0, width: size.width, height: size.height)
    bottomImage!.draw(in: areaSize)

    topImage!.draw(in: areaSize, blendMode: .normal, alpha: 1)

    let newImage:UIImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()
    
    return newImage
}}

And to apply it to my view I did the following:

struct Test: View {

var imageMerger = ImageMerger()

var body: some View {
    Image(uiImage: imageMerger.merge("Consulta-Dep", with: "CellBackground"))
}}

I switched the bottom image with the top image so you could see that the images aren't changing sizes. This is what it looks like in the Preview:

What are you expecting the output to be? A UIImage like in the original question? Or do you just want to be able to draw it on the screen in your view hierarchy? — jnpdx, Jan 18 '21 at 02:03
@jn_pdx, yeah, I want to be able to get a UIImage so I can use it as an Image view. — Nico Cobelo, Jan 18 '21 at 02:27
Do the same as referenced then use `Image(uiImage:)` constructor. Note `Image` is not a model, it is a view, like UIImageView. — Asperi, Jan 18 '21 at 02:29
@Asperi, I'm having a little trouble making it work. I'm creating a struct called ImageMerger and I'm putting the top answer in a function inside that struct, however the images aren't changing size. Could it be because in SwiftUI I have to make the images resizable? — Nico Cobelo, Jan 18 '21 at 13:20
@NicoCobelo you will probably find it more effective to ask your questions with code you've tried and get suggestions based on that — jnpdx, Jan 18 '21 at 18:03
@jn_pdx good advice! I just added the code to my question. Thanks! — Nico Cobelo, Jan 19 '21 at 13:21

score 0 · Accepted Answer · answered Jan 29 '21 at 10:45

Ok, so this isn't exactly answering my question, but since one of the pictures is a blank shape, this is what ended up working for me:

Image("topImageName")
     .resizable()
     .scaledToFill()
     .frame(width: UIScreen.main.bounds.width * 0.8)
     .cornerRadius(15)
     .overlay(RoundedRectangle(cornerRadius: 15)
     .stroke(Color.white, lineWidth: 0))
     .shadow(radius: 10)

The important part is using a cornerRadius modifier (which clips the view) and then overlay a stroke with no width. I actually got the idea from this post.

I hope someone else can benefit from this answer!

How to merge two Images in SwiftUI

1 Answers1