如何在 SwiftUI 中合并两个图像？

Question

我的视图由 3 张图像组成。 Image1 是背景图像（蛋糕）。 Image2 是紫色数字 6，绘制在 Image1 之上。

Image3 是红色数字 1。

我需要一个函数将 6 和 1 组合为单个图像，然后将图像转换为 base64 字符串。目前我使用这个功能来组合两个图像。

func combine(with: UIImage) -> UIImage {
    let baseImage = self
    let rect = CGRect(origin: CGPoint.zero, size: baseImage.size)
    print("combine rect: \(rect)")
        
    let canvasSize = CGSizeMake(rect.width, rect.height)

    let renderer = UIGraphicsImageRenderer(size: canvasSize)
    return renderer.image { context in
        baseImage.draw(in: rect)
        with.draw(in: rect)
    }
}

这会产生这样的结果。 （蛋糕图片隐藏在这里）

它缩放并且位置错误。我希望组合图像能够匹配蛋糕的比例和位置，这样它就可以稍后加载到蛋糕图像的顶部。我在这里做错了什么？任何帮助将不胜感激。

蛋糕图像是 SwiftUI 图像。

 private var backgroundImage: some View {
        ZStack {
  
            KFImage(viewModel.imageUrl)
                .resizable()
                .scaledToFit()
                .overlay {
                    DigitView($viewModel.canvasImage)
                }

        }
        
    }

Answer 1

按照@timbre的建议，您可以使用

UIGraphicsImageRenderer

。

有时像下面的代码应该可以工作：

func combineImages(image1: UIImage, image2: UIImage) -> UIImage? {
let size = CGSize(width: image1.size.width + image2.size.width,
                  height: max(image1.size.height, image2.size.height))

let renderer = UIGraphicsImageRenderer(size: size)

let combinedImage = renderer.image { context in
    // Draw the first image at the leftmost position
    image1.draw(in: CGRect(origin: .zero, size: image1.size))
    
    // Draw the second image starting after the first image
    image2.draw(in: CGRect(origin: CGPoint(x: image1.size.width, y: 0), size: image2.size))
}

return combinedImage
}

查看代码：

var body: some View {
    ZStack {
        Circle()
            .frame(width: 300, height: 300)
            .foregroundStyle(.red)
        Image(uiImage: combineImages(image1: UIImage(systemName: "globe")!, image2: UIImage(systemName: "airplane")!)!)
            .resizable()
            .scaledToFill()
            .frame(width: 100, height: 50)
    }
    .padding()
}