Enhancement : Add borders to produced QR codes pictures

[partikule]

Some printing solution (kiosk / thermal printers like Micronics) doesn't allow to add border styles to pictures.
The result is that the printed QR code is always left aligned.
The only solution was to add "leftBorder" and "topBorder" settings.

Usage :
var qr_data = qr.toDataURL({ value: 'my value', size: 7, leftBorder: 160 // in pixels })

I modified the function canvas() to achieve this.

canvas: function(data) {
      data = normalizeData(data);

      // 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;

      // Partikule hack : Add border
      var leftBorder = data.leftBorder > 0 ? data.leftBorder : 0;
      var topBorder = data.topBorder > 0 ? data.topBorder : 0;
      var cwidth = size + leftBorder;
      var cHeight = size + topBorder;

      // `<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');
      // Ensure the canvas has the correct dimensions.
      c2d.canvas.width  = cwidth;
      c2d.canvas.height = cHeight;
      // Fill the canvas with the correct background colour.
      c2d.fillStyle = data.background || '#fff';
      c2d.fillRect(0, 0, cwidth, cHeight);

      // Determine the ECC level to be applied.
      eccLevel = ECC_LEVELS[(data.level && data.level.toUpperCase()) || 'L'];

      // Generate the image frame for the given `value`.
      var frame = generateFrame(data.value || '');

      c2d.lineWidth = 1;

      // Determine the *pixel* size.
      var px = size;
      px /= width;
      px  = Math.floor(px);

      var offset = Math.floor((size - (px * width)) / 2);

      // Draw the QR code.
      c2d.clearRect(0, 0, cwidth, cHeight);
      c2d.fillStyle = data.background || '#fff';
      c2d.fillRect(0, 0, cwidth, cHeight);
      c2d.fillStyle = data.foreground || '#000';

      var i, j;

      for (i = 0; i < width; i++) {
        for (j = 0; j < width; j++) {
          if (frame[j * width + i]) {
            c2d.fillRect(px * i + offset + leftBorder, px * j + offset + topBorder, px, px);
          }
        }
      }

      return cvs;
    },

[neocotic]

Sorry, but I'm not sure that I fully understand the issue that you're facing that requires this change? It seems to me that the limitation you're facing is not unique to this library but instead to any image at all, in your environment, which I feel is out-of-scope for this library.

I'm open to discussion on this but I simply don't understand why this is specific to qr.js.

[partikule]

Hello,

Yes, it is probably out of range, it just add the ability to add white borders to the produced code.
Of course, I could have use another lib to post-process the produce picture (and then add more processing for only add borders), but I preferred adding it directly as options to the qr.js lib.

As it is only a suggestion, I didn't made a pull request.

You're certainly right, it is out of scope of this lib.

Le 4 mai 2016 à 20:36, Alasdair Mercer [email protected] a écrit :

Sorry, but I'm not sure that I fully understand the issue that you're facing that requires this change? It seems to me that the limitation you're facing is not unique to this library but instead to any image at all, in your environment, which I feel is out-of-scope for this library.

I'm open to discussion on this but I simply don't understand why this is specific to qr.js.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub #44 (comment)

[neocotic]

I hope you'll be happy to know that this feature has been added in the latest version. If you're still using qr.js you'll have to upgrade to QRious >= 2.1.0 to get this feature.

I intend on documenting this migration soon here but I'm hoping it won't be too complicated if you look at the README.

By default, QRious will continue to attempt to determine the best padding automatically but now you can also use the new padding option and property to set the padding (in pixels) explicitly,