SwiftUI - Saving Image to Share Sheet causes image to save blurry/low res

Question

I have a bit of code in my app that generates a QR Code and scales it up (code reference I used from this link from Hackng with Swift. Now, I'm using the share sheet to allow the user to save the qr code to their camera roll and, it is working, but saving the image low res, and it saves to the camera roll blurry (and i assume if it is shared via other methods it will also be blurry)

Here is the code of my share sheet function:

struct ActivityView: UIViewControllerRepresentable {

    let activityItems: [Any]
    let applicationActivities: [UIActivity]?

    func makeUIViewController(context: UIViewControllerRepresentableContext<ActivityView>) -> UIActivityViewController {
        return UIActivityViewController(activityItems: activityItems, applicationActivities: applicationActivities)
    }

    func updateUIViewController(_ uiViewController: UIActivityViewController, context: UIViewControllerRepresentableContext<ActivityView>) {

    }
}

and here's the code in my view struct:

.sheet(isPresented: $showShareSheet) {
                    ShareSheet(activityItems: [self.qrCodeImage])
                }

Is there a trick to remove the interpolation on the image when it saves to the share sheet like the .interpolation(.none) on the image view itself?

Answer 1

Your problem is that the QR code image is actually tiny! Like really tiny:

Printing description of image:
<UIImage:0x60000202cc60 anonymous {23, 23}>

When you share this image, the way it will be displayed is dependant on the program or app that will display it, and is out of control of your app as far as I know.

---

However,

there is a way that you could potentially make it "pretty" in other apps, and this would be to increase the resolution to a larger amount so that when it's rendered it'll appear to have "sharp" pixels.

How would this be accomplished? I think I have an example buried somewhere in old code, I'll dig into it and see if I can find you an example ;)

Edit

I found the code:

extension UIImage {
    func resized(toWidth width: CGFloat) -> UIImage? {
        let canvasSize = CGSize(width: round(width), height: CGFloat(ceil(width/size.width * size.height)))
        UIGraphicsBeginImageContextWithOptions(canvasSize, false, scale)
        defer { UIGraphicsEndImageContext() }
        let context = UIGraphicsGetCurrentContext();
        context?.interpolationQuality = .none
        // Set the quality level to use when rescaling
        draw(in: CGRect(origin: .zero, size: canvasSize))
        let r = UIGraphicsGetImageFromCurrentImageContext()
        return r
    }
}

The trick is to provide a way to scale the image, but the real magic is on line 7:

context?.interpolationQuality = .none

If you exclude this line, you'll get blurry images, which is what the OS does by default because you don't generally want to see the pixel edges in images.

You could use this extension like so:

.sheet(isPresented: $showShareSheet) {
    ShareSheet(activityItems: [self.qrCodeImage.resized(toWidth: 512) ?? UIImage()])
}

However, this may be resizing the image way more often than necessary. Optimally you'd resize it in the same function that you generate it.