react-qrcode-logo - npm Package Compare versions

Comparing version 2.6.0 to 2.7.0

CHANGELOG.md

 # Changelog
 
+## [v2.7.0]
+### Features
+- Added optional prop `removeQrCodeBehindLogo`, if set to true will draw an empty square around the logo.
+
+## [v2.6.0]
+### Features
+- Added optional prop `id` to specify the id of the canvas element.
+
 ## [v2.5.0]
@@ -4,0 +12,0 @@ ### Features

dist/index.d.ts

@@ -19,2 +19,3 @@ import * as React from 'react';
     logoOpacity?: number;
+    removeQrCodeBehindLogo?: boolean;
     eyeRadius?: CornerRadii | CornerRadii[];
@@ -41,2 +42,4 @@ qrStyle?: 'squares' | 'dots';
     private isInPositioninZone;
+    private transformPixelLengthIntoNumberOfCells;
+    private isCoordinateInImage;
     constructor(props: IProps);
@@ -43,0 +46,0 @@ shouldComponentUpdate(nextProps: IProps): boolean;

dist/index.js

@@ -124,2 +124,19 @@ "use strict";
     };
+    QRCode.prototype.transformPixelLengthIntoNumberOfCells = function (pixelLength, cellSize) {
+        return pixelLength / cellSize;
+    };
+    QRCode.prototype.isCoordinateInImage = function (col, row, dWidthLogo, dHeightLogo, dxLogo, dyLogo, cellSize, logoImage) {
+        if (logoImage) {
+            var numberOfCellsMargin = 2;
+            var firstRowOfLogo = this.transformPixelLengthIntoNumberOfCells(dxLogo, cellSize);
+            var firstColumnOfLogo = this.transformPixelLengthIntoNumberOfCells(dyLogo, cellSize);
+            var logoWidthInCells = this.transformPixelLengthIntoNumberOfCells(dWidthLogo, cellSize) - 1;
+            var logoHeightInCells = this.transformPixelLengthIntoNumberOfCells(dHeightLogo, cellSize) - 1;
+            return row >= firstRowOfLogo - numberOfCellsMargin && row <= firstRowOfLogo + logoWidthInCells + numberOfCellsMargin // check rows
+                && col >= firstColumnOfLogo - numberOfCellsMargin && col <= firstColumnOfLogo + logoHeightInCells + numberOfCellsMargin; // check cols
+        }
+        else {
+            return false;
+        }
+    };
     QRCode.prototype.shouldComponentUpdate = function (nextProps) {
@@ -135,3 +152,3 @@ return !isEqual(this.props, nextProps);
     QRCode.prototype.update = function () {
-        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, eyeRadius = _a.eyeRadius;
+        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, removeQrCodeBehindLogo = _a.removeQrCodeBehindLogo, qrStyle = _a.qrStyle, eyeRadius = _a.eyeRadius;
         var qrCode = qrGenerator(0, ecLevel);
@@ -151,2 +168,6 @@ qrCode.addData(QRCode.utf16to8(value));
         var offset = +quietZone;
+        var dWidthLogo = logoWidth || size * 0.2;
+        var dHeightLogo = logoHeight || dWidthLogo;
+        var dxLogo = ((size - dWidthLogo) / 2);
+        var dyLogo = ((size - dHeightLogo) / 2);
         var positioningZones = [
@@ -163,3 +184,3 @@ { row: 0, col: 0 },
                 for (var col = 0; col < length; col++) {
-                    if (qrCode.isDark(row, col) && !this.isInPositioninZone(row, col, positioningZones)) {
+                    if (qrCode.isDark(row, col) && !this.isInPositioninZone(row, col, positioningZones) && !(removeQrCodeBehindLogo && this.isCoordinateInImage(row, col, dWidthLogo, dHeightLogo, dxLogo, dyLogo, cellSize, logoImage))) {
                         ctx.beginPath();
@@ -176,3 +197,3 @@ ctx.arc(Math.round(col * cellSize) + radius + offset, Math.round(row * cellSize) + radius + offset, (radius / 100) * 75, 0, 2 * Math.PI, false);
                 for (var col = 0; col < length; col++) {
-                    if (qrCode.isDark(row, col) && !this.isInPositioninZone(row, col, positioningZones)) {
+                    if (qrCode.isDark(row, col) && !this.isInPositioninZone(row, col, positioningZones) && !(removeQrCodeBehindLogo && this.isCoordinateInImage(row, col, dWidthLogo, dHeightLogo, dxLogo, dyLogo, cellSize, logoImage))) {
                         ctx.fillStyle = fgColor;
@@ -204,11 +225,5 @@ var w = (Math.ceil((col + 1) * cellSize) - Math.floor(col * cellSize));
             image_1.onload = function () {
-                var dwidth = logoWidth || size * 0.2;
-                var dheight = logoHeight || dwidth;
-                var dx = (size - dwidth) / 2;
-                var dy = (size - dheight) / 2;
-                image_1.width = dwidth;
-                image_1.height = dheight;
                 ctx.save();
                 ctx.globalAlpha = logoOpacity;
-                ctx.drawImage(image_1, dx + offset, dy + offset, dwidth, dheight);
+                ctx.drawImage(image_1, dxLogo + offset, dyLogo + offset, dWidthLogo, dHeightLogo);
                 ctx.restore();
@@ -239,2 +254,3 @@ };
         logoOpacity: 1,
+        removeQrCodeBehindLogo: false,
         qrStyle: 'squares',
@@ -241,0 +257,0 @@ eyeRadius: [],

package.json

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

README.md

@@ -41,2 +41,3 @@ # react-qrcode-logo
 | `logoOpacity` | `number` (css opacity 0 <= x <= 1)      | `1`                    | Logo opacity. This allows you to modify the transparency of your logo, so that it won't compromise the readability of the QR Code |
+| `removeQrCodeBehindLogo`         | `boolean`                 |   `false`              | Removes points behind the logo and adds a border with no points around the logo  |
 | `qrStyle` | `squares` &#124; `dots` | `squares`  | Style of the QR Code modules |
@@ -43,0 +44,0 @@ | `eyeRadius` | `number` &#124; `number[]` &#124; `number[][]` |  | The corner radius for the positional patterns (the three "eyes" around the QR code). See more details below |

No alert changes

Improved metrics

Total package byte prevSize

165103

increased by2.07%

Lines of code

595

increased by6.44%

Number of lines in readme file

131

increased by0.77%

No dependency changes