Fix: logo related issues

sumimakito · sumimakito · commit eab18a4bfd2b · 2021-03-13T15:31:49.000+08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## Ver. 2.1.2
+
+- Fixed an issue where the QR codes were not drawing correctly if a logo image was set.
+- Fixed the incorrectly typed option `logoImage` in _Options_.
+- Optimized the style of logo in the QR code.
+
 ## Ver. 2.1.1
 
 - Fixed an issue on protectors drawing for alignment patterns.
diff --git a/README.md b/README.md
@@ -11,9 +11,9 @@ An awesome but simple QR code generator written in JavaScript.
 <table>
 	<tr>
 		<td valign="top"><img src="art/gallery-1.png" width="350"></td>
-    	<td valign="top"><img src="art/gallery-2.png" width="350"></td>
-    	<td valign="top"><img src="art/gallery-3.gif" width="350"></td>
-  	</tr>
+    <td valign="top"><img src="art/gallery-2.png" width="350"></td>
+    <td valign="top"><img src="art/gallery-3.gif" width="350"></td>
+  </tr>
 </table>
 
 ## Contents <!-- omit in toc -->
@@ -125,7 +125,6 @@ type Options = {
   correctLevel?: number;
   maskPattern?: number;
   version?: number;
-  dotScale?: number;
   components?: ComponentOptions;
   colorDark?: string;
   colorLight?: string;
@@ -138,6 +137,7 @@ type Options = {
   logoScale?: number;
   logoMargin?: number;
   logoCornerRadius?: number;
+  dotScale?: number;
 };
 ```
 
diff --git a/dist/awesome-qr.js b/dist/awesome-qr.js
diff --git a/lib/awesome-qr.d.ts b/lib/awesome-qr.d.ts
@@ -167,16 +167,6 @@ export declare type Options = {
      * @defaultValue true
      */
     whiteMargin?: boolean;
-    /**
-     * @deprecated
-     *
-     * Ratio of the real size to the full size of the blocks.
-     *
-     * This can be helpful when you want to make more parts of the background visible.
-     *
-     * @deafultValue 0.4
-     */
-    dotScale?: number;
     /**
      * Logo image to be displayed at the center of the QR code.
      *
@@ -186,7 +176,7 @@ export declare type Options = {
      *
      * @defaultValue undefined
      */
-    logoImage?: string;
+    logoImage?: string | Buffer;
     /**
      * Ratio of the logo size to the QR code size.
      *
@@ -205,6 +195,16 @@ export declare type Options = {
      * @defaultValue 8
      */
     logoCornerRadius?: number;
+    /**
+     * @deprecated
+     *
+     * Ratio of the real size to the full size of the blocks.
+     *
+     * This can be helpful when you want to make more parts of the background visible.
+     *
+     * @deafultValue 0.4
+     */
+    dotScale?: number;
 };
 export declare class AwesomeQR {
     private canvas;
diff --git a/lib/awesome-qr.js b/lib/awesome-qr.js
@@ -85,7 +85,10 @@ var AwesomeQR = /** @class */ (function () {
                 }
             });
         }
-        if (_options.dotScale) {
+        if (_options.dotScale !== null && _options.dotScale !== undefined) {
+            if (_options.dotScale <= 0 || _options.dotScale > 1) {
+                throw new Error("dotScale should be in range (0, 1].");
+            }
             _options.components.data.scale = _options.dotScale;
             _options.components.timing.scale = _options.dotScale;
             _options.components.alignment.scale = _options.dotScale;
@@ -170,8 +173,6 @@ var AwesomeQR = /** @class */ (function () {
     AwesomeQR._drawAlignProtector = function (canvasContext, centerX, centerY, nSize) {
         canvasContext.clearRect((centerX - 2) * nSize, (centerY - 2) * nSize, 5 * nSize, 5 * nSize);
         canvasContext.fillRect((centerX - 2) * nSize, (centerY - 2) * nSize, 5 * nSize, 5 * nSize);
-        // canvasContext.clearRect((centerX - 2) * nWidth, (centerY - 2) * nHeight, 5 * nWidth, 5 * nHeight);
-        // canvasContext.fillRect((centerX - 2) * nWidth, (centerY - 2) * nHeight, 5 * nWidth, 5 * nHeight);
     };
     AwesomeQR._drawAlign = function (canvasContext, centerX, centerY, nSize, xyOffset, dotScale, colorDark, hasProtector) {
         if (xyOffset === void 0) { xyOffset = 0; }
@@ -199,7 +200,7 @@ var AwesomeQR = /** @class */ (function () {
     AwesomeQR.prototype._draw = function () {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
         return __awaiter(this, void 0, void 0, function () {
-            var nCount, rawSize, rawMargin, margin, rawViewportSize, whiteMargin, backgroundDimming, nSize, viewportSize, size, mainCanvas, mainCanvasContext, dotScale, backgroundCanvas, backgroundCanvasContext, parsedGIFBackground, gifFrames, gif, r, g, b, count, i, c, backgroundImage, avgRGB, alignmentPatternCenters, dataScale, dataXyOffset, row, col, bIsDark, isBlkPosCtr, isTiming, isProtected, i, nLeft, nTop, inAgnRange, cornerAlignmentCenter, protectorStyle, i, j, agnX, agnY, timingScale, timingXyOffset, i, cornerAlignmentScale, cornerAlignmentXyOffset, alignmentScale, alignmentXyOffset, i, j, agnX, agnY, logoImage, logoScale, logoMargin, logoCornerRadius, logoSize, x, y, gifOutput_1, backgroundCanvas_1, backgroundCanvasContext_1, patchCanvas_1, patchCanvasContext_1, patchData_1, u8array, binary, outCanvas, outCanvasContext;
+            var nCount, rawSize, rawMargin, margin, rawViewportSize, whiteMargin, backgroundDimming, nSize, viewportSize, size, mainCanvas, mainCanvasContext, backgroundCanvas, backgroundCanvasContext, parsedGIFBackground, gifFrames, gif, r, g, b, count, i, c, backgroundImage, avgRGB, alignmentPatternCenters, dataScale, dataXyOffset, row, col, bIsDark, isBlkPosCtr, isTiming, isProtected, i, nLeft, nTop, inAgnRange, cornerAlignmentCenter, protectorStyle, i, j, agnX, agnY, timingScale, timingXyOffset, i, cornerAlignmentScale, cornerAlignmentXyOffset, alignmentScale, alignmentXyOffset, i, j, agnX, agnY, logoImage, logoScale, logoMargin, logoCornerRadius, logoSize, x, y, oldGlobalCompositeOperation, gifOutput_1, backgroundCanvas_1, backgroundCanvasContext_1, patchCanvas_1, patchCanvasContext_1, patchData_1, u8array, binary, outCanvas, outCanvasContext;
             return __generator(this, function (_v) {
                 switch (_v.label) {
                     case 0:
@@ -218,12 +219,8 @@ var AwesomeQR = /** @class */ (function () {
                         size = viewportSize + 2 * margin;
                         mainCanvas = canvas_1.createCanvas(size, size);
                         mainCanvasContext = mainCanvas.getContext("2d");
-                        dotScale = this.options.dotScale;
                         this._clear();
-                        if (dotScale <= 0 || dotScale > 1) {
-                            throw new Error("Scale should be in range (0, 1].");
-                        }
-                        // Leave room for margin
+                        // Translate to make the top and left margins off the viewport
                         mainCanvasContext.save();
                         mainCanvasContext.translate(margin, margin);
                         backgroundCanvas = canvas_1.createCanvas(size, size);
@@ -389,7 +386,6 @@ var AwesomeQR = /** @class */ (function () {
                                     continue;
                                 }
                                 else {
-                                    // mainCanvasContext.fillStyle = "rgba(0, 0, 0, .2)";
                                     AwesomeQR._drawAlign(mainCanvasContext, agnX, agnY, nSize, alignmentXyOffset, alignmentScale, this.options.colorDark, ((_u = (_t = this.options.components) === null || _t === void 0 ? void 0 : _t.alignment) === null || _u === void 0 ? void 0 : _u.protectors) || false);
                                 }
                             }
@@ -418,21 +414,31 @@ var AwesomeQR = /** @class */ (function () {
                         if (logoCornerRadius < 0) {
                             logoCornerRadius = 0;
                         }
-                        mainCanvasContext.restore();
                         logoSize = viewportSize * logoScale;
                         x = 0.5 * (size - logoSize);
                         y = x;
+                        // Restore the canvas
+                        // After restoring, the top and left margins should be taken into account
+                        mainCanvasContext.restore();
+                        // Clean the area that the logo covers (including margins)
                         mainCanvasContext.fillStyle = "#FFFFFF";
                         mainCanvasContext.save();
-                        AwesomeQR._prepareRoundedCornerClip(mainCanvasContext, x - logoMargin, y - logoMargin, logoSize + 2 * logoMargin, logoSize + 2 * logoMargin, logoCornerRadius);
+                        AwesomeQR._prepareRoundedCornerClip(mainCanvasContext, x - logoMargin, y - logoMargin, logoSize + 2 * logoMargin, logoSize + 2 * logoMargin, logoCornerRadius + logoMargin);
                         mainCanvasContext.clip();
+                        oldGlobalCompositeOperation = mainCanvasContext.globalCompositeOperation;
+                        mainCanvasContext.globalCompositeOperation = "destination-out";
                         mainCanvasContext.fill();
+                        mainCanvasContext.globalCompositeOperation = oldGlobalCompositeOperation;
                         mainCanvasContext.restore();
+                        // Draw logo image
                         mainCanvasContext.save();
                         AwesomeQR._prepareRoundedCornerClip(mainCanvasContext, x, y, logoSize, logoSize, logoCornerRadius);
                         mainCanvasContext.clip();
                         mainCanvasContext.drawImage(logoImage, x, y, logoSize, logoSize);
                         mainCanvasContext.restore();
+                        // Re-translate the canvas to translate the top and left margins into invisible area
+                        mainCanvasContext.save();
+                        mainCanvasContext.translate(margin, margin);
                         _v.label = 6;
                     case 6:
                         if (!!parsedGIFBackground) {
@@ -529,7 +535,7 @@ var AwesomeQR = /** @class */ (function () {
         backgroundDimming: "rgba(0,0,0,0)",
         logoImage: undefined,
         logoScale: 0.2,
-        logoMargin: 6,
+        logoMargin: 4,
         logoCornerRadius: 8,
         whiteMargin: true,
         components: AwesomeQR.defaultComponentOptions,
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "awesome-qr",
-  "version": "2.1.1-rc.0",
+  "version": "2.1.2-rc.0",
   "description": "An awesome but simple QR code generator written in JavaScript.",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
diff --git a/src/awesome-qr.ts b/src/awesome-qr.ts
@@ -194,17 +194,6 @@ export type Options = {
    */
   whiteMargin?: boolean;
 
-  /**
-   * @deprecated
-   *
-   * Ratio of the real size to the full size of the blocks.
-   *
-   * This can be helpful when you want to make more parts of the background visible.
-   *
-   * @deafultValue 0.4
-   */
-  dotScale?: number;
-
   /**
    * Logo image to be displayed at the center of the QR code.
    *
@@ -214,7 +203,7 @@ export type Options = {
    *
    * @defaultValue undefined
    */
-  logoImage?: string;
+  logoImage?: string | Buffer;
 
   /**
    * Ratio of the logo size to the QR code size.
@@ -236,6 +225,17 @@ export type Options = {
    * @defaultValue 8
    */
   logoCornerRadius?: number;
+
+  /**
+   * @deprecated
+   *
+   * Ratio of the real size to the full size of the blocks.
+   *
+   * This can be helpful when you want to make more parts of the background visible.
+   *
+   * @deafultValue 0.4
+   */
+  dotScale?: number;
 };
 
 export class AwesomeQR {
@@ -275,7 +275,7 @@ export class AwesomeQR {
     backgroundDimming: "rgba(0,0,0,0)",
     logoImage: undefined,
     logoScale: 0.2,
-    logoMargin: 6,
+    logoMargin: 4,
     logoCornerRadius: 8,
     whiteMargin: true,
     components: AwesomeQR.defaultComponentOptions,
@@ -311,7 +311,10 @@ export class AwesomeQR {
       });
     }
 
-    if (_options.dotScale) {
+    if (_options.dotScale !== null && _options.dotScale !== undefined) {
+      if (_options.dotScale! <= 0 || _options.dotScale! > 1) {
+        throw new Error("dotScale should be in range (0, 1].");
+      }
       _options.components.data!.scale = _options.dotScale;
       _options.components.timing!.scale = _options.dotScale;
       _options.components.alignment!.scale = _options.dotScale;
@@ -430,9 +433,6 @@ export class AwesomeQR {
   ) {
     canvasContext.clearRect((centerX - 2) * nSize, (centerY - 2) * nSize, 5 * nSize, 5 * nSize);
     canvasContext.fillRect((centerX - 2) * nSize, (centerY - 2) * nSize, 5 * nSize, 5 * nSize);
-
-    // canvasContext.clearRect((centerX - 2) * nWidth, (centerY - 2) * nHeight, 5 * nWidth, 5 * nHeight);
-    // canvasContext.fillRect((centerX - 2) * nWidth, (centerY - 2) * nHeight, 5 * nWidth, 5 * nHeight);
   }
 
   private static _drawAlign(
@@ -487,14 +487,9 @@ export class AwesomeQR {
     const mainCanvas = createCanvas(size, size);
     const mainCanvasContext = mainCanvas.getContext("2d");
 
-    const dotScale = this.options.dotScale!;
     this._clear();
 
-    if (dotScale <= 0 || dotScale > 1) {
-      throw new Error("Scale should be in range (0, 1].");
-    }
-
-    // Leave room for margin
+    // Translate to make the top and left margins off the viewport
     mainCanvasContext.save();
     mainCanvasContext.translate(margin, margin);
 
@@ -701,7 +696,6 @@ export class AwesomeQR {
         } else if (agnX === cornerAlignmentCenter && agnY === cornerAlignmentCenter) {
           continue;
         } else {
-          // mainCanvasContext.fillStyle = "rgba(0, 0, 0, .2)";
           AwesomeQR._drawAlign(
             mainCanvasContext,
             agnX,
@@ -741,12 +735,15 @@ export class AwesomeQR {
         logoCornerRadius = 0;
       }
 
-      mainCanvasContext.restore();
-
       const logoSize = viewportSize * logoScale;
       const x = 0.5 * (size - logoSize);
       const y = x;
 
+      // Restore the canvas
+      // After restoring, the top and left margins should be taken into account
+      mainCanvasContext.restore();
+
+      // Clean the area that the logo covers (including margins)
       mainCanvasContext.fillStyle = "#FFFFFF";
       mainCanvasContext.save();
       AwesomeQR._prepareRoundedCornerClip(
@@ -755,17 +752,25 @@ export class AwesomeQR {
         y - logoMargin,
         logoSize + 2 * logoMargin,
         logoSize + 2 * logoMargin,
-        logoCornerRadius
+        logoCornerRadius + logoMargin
       );
       mainCanvasContext.clip();
+      const oldGlobalCompositeOperation = mainCanvasContext.globalCompositeOperation;
+      mainCanvasContext.globalCompositeOperation = "destination-out";
       mainCanvasContext.fill();
+      mainCanvasContext.globalCompositeOperation = oldGlobalCompositeOperation;
       mainCanvasContext.restore();
 
+      // Draw logo image
       mainCanvasContext.save();
       AwesomeQR._prepareRoundedCornerClip(mainCanvasContext, x, y, logoSize, logoSize, logoCornerRadius);
       mainCanvasContext.clip();
       mainCanvasContext.drawImage(logoImage, x, y, logoSize, logoSize);
       mainCanvasContext.restore();
+
+      // Re-translate the canvas to translate the top and left margins into invisible area
+      mainCanvasContext.save();
+      mainCanvasContext.translate(margin, margin);
     }
 
     if (!!parsedGIFBackground) {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "awesome-qr",`
`3`		`- "version": "2.1.1-rc.0",`
	`3`	`+ "version": "2.1.2-rc.0",`
`4`	`4`	`"description": "An awesome but simple QR code generator written in JavaScript.",`
`5`	`5`	`"main": "./lib/index.js",`
`6`	`6`	`"types": "./lib/index.d.ts",`