SwiftUI: Image with barcode doesn't show up

Question

I'm trying to present an instance of UIImage, generated as a barcode from a string:

if let image = UIImage(barcode: "1234567890") {
    Image(uiImage: image)
}

But it shows empty rectangle, though in debug the image is populated with the real image:

I use a simple UIImage extension to generate an UIImage with barcode from a string:

extension UIImage {

    convenience init?(barcode: String) {
        let data = barcode.data(using: .ascii)
        guard let filter = CIFilter(name: "CICode128BarcodeGenerator") else {
            return nil
        }

        filter.setValue(data, forKey: "inputMessage")
        guard let ciImage = filter.outputImage else {
            return nil
        }

        self.init(ciImage: ciImage)
    }

}

What's wrong? Any ideas?

Bombsight

Answer 1

Yes, looks like some defect/incompatibility with Image. You can file a feedback to Apple.

Meanwhile here is a workaround. Tested with Xcode 12 / iOS 14

struct TestBarCodeView: View {
    var body: some View {
        VStack {
            BarCodeView(barcode: "1234567890")
                .scaledToFit()
                .padding().border(Color.red)
        }
    }
}

struct BarCodeView: UIViewRepresentable {
    let barcode: String
    func makeUIView(context: Context) -> UIImageView {
        UIImageView()
    }

    func updateUIView(_ uiView: UIImageView, context: Context) {
        uiView.image = UIImage(barcode: barcode)
    }
}

Feather

Worked well. Thank-you! – Undertaker

Answer 2

BarCode without UIKit UIViewRepresentable

import SwiftUI
import CoreImage.CIFilterBuiltins

extension Image {

    enum BarCode {
        case qrCode
        case code128Barcode
        case pdf417Barcode
        case aztecCode
    }

    init(code: String, _ type: BarCode) {
        let context = CIContext()
        let filter: CIFilter
        switch type {
        case .qrCode:
            let aFilter = CIFilter.qrCodeGenerator()
            aFilter.message = Data(code.utf8)
            filter = aFilter
        case .code128Barcode:
            let aFilter = CIFilter.code128BarcodeGenerator()
            aFilter.message = Data(code.utf8)
            filter = aFilter
        case .pdf417Barcode:
            let aFilter = CIFilter.pdf417BarcodeGenerator()
            aFilter.message = Data(code.utf8)
            filter = aFilter
        case .aztecCode:
            let aFilter = CIFilter.aztecCodeGenerator()
            aFilter.message = Data(code.utf8)
            filter = aFilter
        }
    
        if let ciImage = filter.outputImage,
           let cgImage = context.createCGImage(ciImage, from: ciImage.extent) {
            self.init(cgImage, scale: 1, label: Text("BarCode"))
        } else {
            self.init(systemName: "xmark.circle")
        }
    
    }
}

Use

Image(code: "Test QR Code", .qrCode)
     .resizable()
     .interpolation(.none)
     .scaledToFit()

Algology

This is amazing! You could also simplify this init: self.init(cgImage, scale: 1, label: Text("BarCode")) with this: self.init(uiImage: UIImage(cgImage: cgImage)) – Monoploid