codebude/QRCoder

QR Codes with images losing data when converting to byte[]

Closed this issue · 9 comments

Type of issue

[x ] Bug
[ ] Question (e.g. about handling/usage)
[ ] Request for new feature/improvement

Expected Behavior

I expect the generated QR code to look like this but have the logo in the middle.
Screen Shot 2020-04-07 at 1 23 27 PM

Current Behavior

This is currently what is output if adding a logo.
Screen Shot 2020-04-07 at 1 23 03 PM

Steps to Reproduce (for bugs)

Here is my code for generating a QR Code with a logo

private async Task<byte[]> GetLogoQRCode(string url, string darkColorHex, string logoUrl)
        {
            PayloadGenerator.Url generator = new PayloadGenerator.Url(url);
            string payload = generator.ToString();
            using (var qrGenerator = new QRCodeGenerator())
            using (var qrCodeData = qrGenerator.CreateQrCode(payload, QRCodeGenerator.ECCLevel.Q))
            using (var qrCode = new QRCode(qrCodeData))
            using (var stream = new MemoryStream())
            {
                // Grab an image from the internet and convert it to a Bitmap
                var logo = await _webHelper.GetImageFromWeb(logoUrl);
                // Convert a Hex string into a Color
                var darkColor = ColorTranslator.FromHtml(darkColorHex);
                var qrCodeImage = qrCode.GetGraphic(20, darkColor, Color.White, logo, 20);
                qrCodeImage.Save(stream, System.Drawing.Imaging.ImageFormat.Bmp);
                var result = stream.ToArray();
                return result;
            }
        }

Your Environment

  • OS: macOS Mojave Version 10.14.6
  • Version used: 1.3.5
  • Compiled from source or NuGet package?: Nuget
  • Payload/Encoded text: payload
  • Used payload generator: yes
  • Used ECC-level:
  • Used renderer class:
  • Environment (.NET 3.5, .NET 4.X, .NETCore, ...): .NET 2.2

The problem is this line

region.Exclude(iconPath);

I removed that line and now QR codes, with logos, generate correctly.

Screen Shot 2020-05-19 at 10 21 58 AM

Great! can you please create pull request so codebude can release it

@Sdraugel have you tried this with transparent logos? (e.g. a png graphic with alpha transparent channel) If I remember correctly I added the region.Exclude to build "whitespace" in the size of the logo graphics, so that the logo can be seen clearly. I guess without the region.Exclude it could be hard to see logos with a transparent background.

@codebude It does get rid of the white background but a side effect of using region.Exclude is a lot of lost data for Linux and Mac. You can still see a png with alpha transparency fine, as long as it isn't a solid color that's the same as the background or foreground.

Here is one I generated:
Screen Shot 2020-06-05 at 9 22 40 AM

My suggestion, if you want to add a white background, is to add it to the passed in png. This will prevent the region.Exclude side bug and still achieve your desired look.

Waiting this fix to be released to nuget

@codebude I mean, people could just add a white background of any shape into their logo. I did it (using a white circle) and I am totally happy with the result. Right now I am using a workaround to draw it over the QR code, but this fix will genuinely improve people's experience with the library.

How's it going with the fix for this?

Hi @Sdraugel , @manikata0 , @Simon311 @johnboker , @abrari - thanks for you support and pushing me again and again to merge this. I really apologize for the long response times. That's not how it should work out usually. Thus thanks again for being patient! :-)