how to fix an unclear qr code image generated using zxing 2.1?

Question

I have generated a QR code image using zxing 2.1 library, but the image is very blurry and unclear. Where might I be possibly going wrong?

Answer 1

The generation happens at a lower level and then is scaled with a width and height request. You can request generation at a higher width and height.

ZXing exposes BarcodeOptions in the viewer that you can set.

In your model you can do this:

public EncodingOptions BarcodeOptions => new EncodingOptions() { Height = 100, Width = 100, PureBarcode = true };

Then in your XAML it might look like this:

<z:ZXingBarcodeImageView BarcodeFormat="QR_CODE" HeightRequest="100" WidthRequest="100" Margin="10" BarcodeValue="a long url to a thing that accepts a zing to another thing"
                         BarcodeOptions="{Binding BarcodeOptions}" >

Remember to update the width and height of your EncodingOptions if you change the width and height on your XAML.

Answer 2

I don't think there's anything wrong with the image you're creating. It's only when you're displaying it that it's coming out blurry.

You're generating a small QR code, with limited resolution in each direction. That's absolutely fine, but when it gets displayed, it needs to be scaled up appropriately. Whatever you're using to display the image (Android's default image viewer, maybe) is resampling the image and trying to reduce jagged edges. That's what you want if it's a photo, but quite inappropriate for a bar code, where you want it to be rescaled using a nearest neighbour algorithm. That way, it won't look blurry at all.

(It's hard to be absolutely certain about this unless you post the actual image rather than a screenshot, though.)