SwiftUI masking gradient with UIImage - swiftui

Question

I want to mask a linear gradient with a Image initialized with Image(uiImage: ...). This kind of masking can clearly be done with Images initialized as systemName but when done with a UIImage there is no "masking" performed. Note that I need to use UIImage because my intention is to use a generated qrcode as the mask.
Correctly Masked sf image:
Incorrectly masked UIImage:
Exmaple Code:
struct ContentView: View {
let string: String = "String"
let context = CIContext()
let filter = CIFilter.qrCodeGenerator()
let size: CGFloat = 150
func generateQRCode(string: String) -> UIImage? {
let data = Data(string.utf8)
filter.setValue(data, forKey: "inputMessage")
if let qrCodeImage = filter.outputImage {
if let qrCodeCGImage = self.context.createCGImage(qrCodeImage, from: qrCodeImage.extent) {
return UIImage(cgImage: qrCodeCGImage)
}
}
return nil
}
var body: some View {
VStack {
// sf image qr code
GradientRectangle()
.mask {
Image(systemName: "qrcode")
.resizable()
}
.frame(width: size, height: size)
// uiimage qr code
if let image = generateQRCode(string: string) {
GradientRectangle()
.mask {
Image(uiImage: image)
.interpolation(.none)
.resizable()
}
.frame(width: size, height: size)
}
}
}
}
struct GradientRectangle: View {
var body: some View {
Rectangle()
.fill(LinearGradient(colors: [.yellow, .orange], startPoint: .topLeading, endPoint: .bottomTrailing))
}
}

Answer 1

The generated qrCodeImage has no transparency (as you expected) but black& white, so it is just needed to convert it additionally into mask.
Tested with Xcode 13.2 / iOS 15.2
Here is fixed part of code:
func generateQRCode(string: String) -> UIImage? {
let data = Data(string.utf8)
filter.setValue(data, forKey: "inputMessage")
if let qrCodeImage = filter.outputImage {
let maskFilter = CIFilter.maskToAlpha()
maskFilter.setDefaults()
maskFilter.setValue(qrCodeImage, forKey:"inputImage")
if let maskImage = maskFilter.outputImage, let qrCodeCGImage = self.context.createCGImage(maskImage, from: maskImage.extent) {
return UIImage(cgImage: qrCodeCGImage)
}
}
return nil
}