react-qrcode-logo - npm Package Compare versions

Comparing version 2.2.0 to 2.2.1

CHANGELOG.md

 # Changelog
 
+## [v2.2.1]
+### Fixes
+- Changed `quietZone` implementation so that it's included directly in the canvas, instead of just an HTML padding. This fixes the issue that caused the QR Code to appear without the quiet zone when it got saved.
+
 ## [v2.2.0]
@@ -4,0 +8,0 @@ ### Features

dist/index.d.ts

@@ -34,4 +34,2 @@ import * as React from 'react';
             width: string;
-            padding: string;
-            background: string;
         };
@@ -38,0 +36,0 @@ ref: React.RefObject<HTMLCanvasElement>;

dist/index.js

@@ -47,4 +47,3 @@ "use strict";
     };
-    QRCode.prototype.drawPositioningPattern = function (row, col, length, ctx) {
-        var cellSize = this.props.size / length;
+    QRCode.prototype.drawPositioningPattern = function (cellSize, offset, row, col, length, ctx) {
         for (var r = -1; r <= 7; r++) {
@@ -60,3 +59,3 @@ if (!(row + r <= -1 || length <= row + r)) {
                         ctx.fillStyle = this.props.fgColor;
-                        ctx.fillRect(Math.round((row + r) * cellSize), Math.round((col + c) * cellSize), w, h);
+                        ctx.fillRect(Math.round((row + r) * cellSize) + offset, Math.round((col + c) * cellSize) + offset, w, h);
                     }
@@ -78,3 +77,3 @@ }
     QRCode.prototype.update = function () {
-        var _a = this.props, value = _a.value, ecLevel = _a.ecLevel, enableCORS = _a.enableCORS, size = _a.size, bgColor = _a.bgColor, fgColor = _a.fgColor, logoImage = _a.logoImage, logoWidth = _a.logoWidth, logoHeight = _a.logoHeight, logoOpacity = _a.logoOpacity, qrStyle = _a.qrStyle;
+        var _a = this.props, value = _a.value, ecLevel = _a.ecLevel, enableCORS = _a.enableCORS, size = _a.size, quietZone = _a.quietZone, bgColor = _a.bgColor, fgColor = _a.fgColor, logoImage = _a.logoImage, logoWidth = _a.logoWidth, logoHeight = _a.logoHeight, logoOpacity = _a.logoOpacity, qrStyle = _a.qrStyle;
         var qrCode = qrGenerator(0, ecLevel);
@@ -85,9 +84,11 @@ qrCode.addData(QRCode.utf16to8(value));
         var ctx = canvas.getContext('2d');
+        var canvasSize = +size + (2 * +quietZone);
         var length = qrCode.getModuleCount();
         var cellSize = size / length;
         var scale = (window.devicePixelRatio || 1);
-        canvas.height = canvas.width = size * scale;
+        canvas.height = canvas.width = canvasSize * scale;
         ctx.scale(scale, scale);
         ctx.fillStyle = bgColor;
-        ctx.fillRect(0, 0, size, size);
+        ctx.fillRect(0, 0, canvasSize, canvasSize);
+        var offset = +quietZone;
         if (qrStyle === 'dots') {
@@ -100,3 +101,3 @@ ctx.fillStyle = fgColor;
                         ctx.beginPath();
-                        ctx.arc(Math.round(col * cellSize) + radius, Math.round(row * cellSize) + radius, (radius / 100) * 75, 0, 2 * Math.PI, false);
+                        ctx.arc(Math.round(col * cellSize) + radius + offset, Math.round(row * cellSize) + radius + offset, (radius / 100) * 75, 0, 2 * Math.PI, false);
                         ctx.closePath();
@@ -107,5 +108,5 @@ ctx.fill();
             }
-            this.drawPositioningPattern(0, 0, length, ctx);
-            this.drawPositioningPattern(length - 7, 0, length, ctx);
-            this.drawPositioningPattern(0, length - 7, length, ctx);
+            this.drawPositioningPattern(cellSize, offset, 0, 0, length, ctx);
+            this.drawPositioningPattern(cellSize, offset, length - 7, 0, length, ctx);
+            this.drawPositioningPattern(cellSize, offset, 0, length - 7, length, ctx);
         }
@@ -119,3 +120,3 @@ else {
                         var h = (Math.ceil((row + 1) * cellSize) - Math.floor(row * cellSize));
-                        ctx.fillRect(Math.round(col * cellSize), Math.round(row * cellSize), w, h);
+                        ctx.fillRect(Math.round(col * cellSize) + offset, Math.round(row * cellSize) + offset, w, h);
                     }
@@ -139,3 +140,3 @@ }
                 ctx.globalAlpha = logoOpacity;
-                ctx.drawImage(image_1, dx, dy, dwidth, dheight);
+                ctx.drawImage(image_1, dx + offset, dy + offset, dwidth, dheight);
                 ctx.restore();
@@ -147,12 +148,8 @@ };
     QRCode.prototype.render = function () {
+        var size = +this.props.size + (2 * +this.props.quietZone);
         return React.createElement('canvas', {
             id: 'react-qrcode-logo',
-            height: this.props.size,
-            width: this.props.size,
-            style: {
-                height: this.props.size + 'px',
-                width: this.props.size + 'px',
-                padding: this.props.quietZone + 'px',
-                background: this.props.bgColor
-            },
+            height: size,
+            width: size,
+            style: { height: size + 'px', width: size + 'px' },
             ref: this.canvas
@@ -159,0 +156,0 @@ });

package.json

 {
   "name": "react-qrcode-logo",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "React component to generate a QR Code customizable with logo and more properties",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

 # react-qrcode-logo
 Typescript React component to generate a customizable QR Code.
 
+<div style="display: flex; flex-direction: row;">
+	<img src="res/qrcode-react.png" height="256" width="256">
+	<img src="res/qrcode-miku.png" height="256" width="256">
+	<img src="res/qrcode-android.png" height="256" width="256">
+</div>
+
 ## Installation
 
-```
+```bash
 npm install --save react-qrcode-logo
@@ -11,3 +17,3 @@ ```
 
-```
+```javascript
 import * as React from 'react';
@@ -38,6 +44,33 @@ import { QRCode } from 'react-qrcode-logo';
 
-## Credits 
-This package was inspired by [cssivision/qrcode-react](https://github.com/cssivision/qrcode-react) and [zpao/qrcode.react](https://github.com/zpao/qrcode.react). Also looked up some parts from [kazuhikoarase/qrcode-generator](https://github.com/kazuhikoarase/qrcode-generator) (which this package depends on). 
+## Example 
+You can find a very simple demo project [here](https://github.com/gcoro/QRCodeCustomizer). 
 
 ## Contributing
-PR's are welcome. Thanks to everyone who contributed :)
+Thanks to everyone who contributed :) PRs and suggestions are welcome.
+
+<table>
+<tr><td align="center" valign="top">
+			<a href="https://github.com/gcoro">
+			<img src="https://avatars0.githubusercontent.com/u/37499369?v=4" width="100px;" alt="gcoro" /><br />
+			<sup><b>gcoro</b></sup></a><br />
+			</td><td align="center" valign="top">
+			<a href="https://github.com/JChord">
+			<img src="https://avatars3.githubusercontent.com/u/981214?v=4" width="100px;" alt="JChord" /><br />
+			<sup><b>JChord</b></sup></a><br />
+			</td><td align="center" valign="top">
+			<a href="https://github.com/mushang11">
+			<img src="https://avatars0.githubusercontent.com/u/13930277?v=4" width="100px;" alt="mushang11" /><br />
+			<sup><b>mushang11</b></sup></a><br />
+			</td><td align="center" valign="top">
+			<a href="https://github.com/Trexy94">
+			<img src="https://avatars0.githubusercontent.com/u/16225761?v=4" width="100px;" alt="Trexy94" /><br />
+			<sup><b>Trexy94</b></sup></a><br />
+			</td><td align="center" valign="top">
+			<a href="https://github.com/ty-everett">
+			<img src="https://avatars1.githubusercontent.com/u/23272461?v=4" width="100px;" alt="ty-everett" /><br />
+			<sup><b>ty-everett</b></sup></a><br />
+			</td></tr>
+</table>
+
+## More credits 
+This package was inspired by [cssivision/qrcode-react](https://github.com/cssivision/qrcode-react) and [zpao/qrcode.react](https://github.com/zpao/qrcode.react). Also looked up some parts from [kazuhikoarase/qrcode-generator](https://github.com/kazuhikoarase/qrcode-generator) (which this package depends on). 

tsconfig.json

@@ -0,0 +0,0 @@ {

No alert changes

Improved metrics

Total package byte prevSize

147119

increased by622.55%

Number of package files

11

increased by37.5%

Lines of code

381

increased by1.6%

Number of lines in readme file

75

increased by78.57%

No dependency changes