Padding issues

[neocotic]

The whitespace padding needs to be much more consistent as it currently varies depending on the size and doesn't fill the dimensions well enough.

[F-Hauri]

I confirm: This work fine exept outer line!

There is a need to draw a white border, with same size than minimal block.

Workaround consist of having image or canvas in html element white padded (even using CSS).

Border effect is that resulting image have to be resized before printing or working on.

[F-Hauri]

There is some correction I made, margin seem fine, pixel size too, but unfortunely I don't understand why I have to run two pass... There is a working try: http://fhauri.cartou.ch/qr

--- -   2014-01-31 13:02:44.796061685 +0100
+++ qr.js       2014-01-31 12:57:51.641130369 +0100
@@ -1019,12 +1019,19 @@
       // Module size of the generated QR code (i.e. 1-10).
       var size = data.size >= 1 && data.size <= 10 ? data.size : 4;
       // Actual size of the QR code symbol and is scaled to 25 pixels (e.g. 1 = 25px, 3 = 75px).
-      size *= 25;
+//      size *= 25;
+      size *= (2+width);

       // `<canvas>` element used to render the QR code.
       var cvs = data.canvas || createCanvas();
       // Retreive the 2D context of the canvas.
       var c2d = cvs.getContext('2d');
+
+      // Determine the *pixel* size.
+      var px = size;
+      px /= (2+width);
+      px  = Math.round(px - 0.5);
+
       // Ensure the canvas has the correct dimensions.
       c2d.canvas.width  = size;
       c2d.canvas.height = size;
@@ -1040,11 +1047,6 @@

       c2d.lineWidth = 1;

-      // Determine the *pixel* size.
-      var px = size;
-      px /= width;
-      px  = Math.round(px - 0.5);
-
       // Draw the QR code.
       c2d.clearRect(0, 0, size, size);
       c2d.fillStyle = data.background || '#fff';
@@ -1056,7 +1058,7 @@
       for (i = 0; i < width; i++) {
         for (j = 0; j < width; j++) {
           if (frame[j * width + i]) {
-            c2d.fillRect(px * i, px * j, px, px);
+            c2d.fillRect(px * (1+i), px * (1+j), px, px);
           }
         }
       }

[andrewagain]

Looks like this is still an issue in the latest version: 4.0.2

My options:

    var qr = new QRious({
      element: canvasElement,
      level: "L",
      padding: 0,
      size: 100,
      value: "meow"
    });

[pcooperuk]

Hi, Even thought this issue is closed, it's still happens with the latest version and its not a nice UI experience. As wanted to use the library, I have made a tweak to improve this just one line change if you want to include into the official version.

just replace line 404 in qrious.js

from: var offset = this.getOffset(frame);

to: var offset=parseInt((this.element.width-(frame.width*moduleSize))/2);

tested across a variety of sizes and content

[zcqno1]

I guess it maybe because the QR code's minimal unit's size could not be bigger, otherwise, the total size would be larger than the expected size. Using the scale method may force the size to cover. By the way, set a higher level would make it better, but also more complex. Maybe the document should note the padding issue.