Url length affects whitespace on edge of qr

[karlwesterman]

Adding or subtracting from the url creates/removes whitespace around the actual qr code. This does not work in a normal ratio but seems very random that it sometimes jumps up and down in size.

I don't understand why this would happen, first I thought it was due to my config but it seems its the same in codepen. https://codesandbox.io/s/l8rwl?file=/src/App.js Try changing the url length and see that the image appears to change in size now and then.

[pablomaurer]

The more characters you give to the data property the more whitespace it will add (somehow randomly). Happens in all versions tested from 1.3.xx to 1.6.xx.

Easy angular example: https://codesandbox.io/s/l8rwl?file=/src/App.js

[mhdolatabadi]

This problem occured when size is small. In my case, when i put a long url in a 180x180 area for qrcode, it creates whitespace around the actual qrcode which lead to getting qrcode very small but strangely, same url on size 200x200 pixel was same as a short url qrcode.

[ezodnem]

the only thing I could figure out to correct this issue for me was changing the errorCorrectionLevel to "M"

[hawkerboy7]

@karlwesterman This happens because when you add more data, the QR needs to contain more data. To do this at some point it needs to render more "dots" (in this lib with improved styling also lines) in the QR-code to represent that data. The more dots you have the bigger the QR becomes, however most of the time the canvas size is limited which means the "dots" need to be rendered smaller and smaller to fit within the limited canvas space e.g. 300x300.

The library renders each of the "dots" ON a pixel to prevent the QR-code from becoming blurry

So that means a dot for example is 7x7 pixels on your screen and you have 42x42 dots. Width and height would then be: 7 x 42 = 294 pixels. If your canvas is 300x300 you have (300-294) / 2 = 3 pixels of space around the qr-code which will be centered in the canvas.

Now you increase the amount of data and you require 43x43 dots to represent the data. 300/43 ≈ 6,98. So your dot needs 6,98x6,98 pixels or it will overflow the canvas. The lib then switches to using 6x6 dots to prevent a blurry image. Resulting width and height: 6 x 43 = 258 pixels. With your 300x300 canvas you now have (300-258) / 2 = 21 pixels of space around the qr-code.

@ezodnem Changing the errorCorrectionLevel does not resolve this behaviour, but makes it so that for your URL range your QR-code is probably longer in the range in which the "dots" size can stay the same.