kozakdenys#17 add SVG support

sorcererxw · May 27, 2021 · b01c0ac · b01c0ac
1 parent 4cac713
commit b01c0ac
Show file tree

Hide file tree

Showing 16 changed files with 1,246 additions and 45 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/src/constants/drawTypes.ts b/src/constants/drawTypes.ts
@@ -0,0 +1,6 @@
+import { DrawTypes } from "../types";
+
+export default {
+  canvas: "canvas",
+  svg: "svg"
+} as DrawTypes;
diff --git a/src/core/QRCanvas.ts b/src/core/QRCanvas.ts
@@ -1,8 +1,8 @@
 import calculateImageSize from "../tools/calculateImageSize";
 import errorCorrectionPercents from "../constants/errorCorrectionPercents";
-import QRDot from "./QRDot";
-import QRCornerSquare from "./QRCornerSquare";
-import QRCornerDot from "./QRCornerDot";
+import QRDot from "../figures/dot/canvas/QRDot";
+import QRCornerSquare from "../figures/cornerSquare/canvas/QRCornerSquare";
+import QRCornerDot from "../figures/cornerDot/canvas/QRCornerDot";
 import { RequiredOptions, Gradient } from "./QROptions";
 import gradientTypes from "../constants/gradientTypes";
 import { QRCode } from "../types";

diff --git a/src/core/QRCodeStyling.ts b/src/core/QRCodeStyling.ts
@@ -2,6 +2,9 @@ import getMode from "../tools/getMode";
 import mergeDeep from "../tools/merge";
 import downloadURI from "../tools/downloadURI";
 import QRCanvas from "./QRCanvas";
+import QRSVG from "./QRSVG";
+import drawTypes from "../constants/drawTypes";
+
 import defaultOptions, { Options, RequiredOptions } from "./QROptions";
 import sanitizeOptions from "../tools/sanitizeOptions";
 import { Extension, QRCode } from "../types";
@@ -16,6 +19,7 @@ export default class QRCodeStyling {
   _options: RequiredOptions;
   _container?: HTMLElement;
   _canvas?: QRCanvas;
+  _svg?: QRSVG;
   _qr?: QRCode;
   _drawingPromise?: Promise<void>;
 
@@ -41,8 +45,15 @@ export default class QRCodeStyling {
     this._qr = qrcode(this._options.qrOptions.typeNumber, this._options.qrOptions.errorCorrectionLevel);
     this._qr.addData(this._options.data, this._options.qrOptions.mode || getMode(this._options.data));
     this._qr.make();
-    this._canvas = new QRCanvas(this._options);
-    this._drawingPromise = this._canvas.drawQR(this._qr);
+
+    if (this._options.type === drawTypes.canvas) {
+      this._canvas = new QRCanvas(this._options);
+      this._drawingPromise = this._canvas.drawQR(this._qr);
+    } else {
+      this._svg = new QRSVG(this._options);
+      this._drawingPromise = this._svg.drawQR(this._qr);
+    }
+
     this.append(this._container);
   }
 
@@ -55,8 +66,14 @@ export default class QRCodeStyling {
       throw "Container should be a single DOM node";
     }
 
-    if (this._canvas) {
-      container.appendChild(this._canvas.getCanvas());
+    if (this._options.type === drawTypes.canvas) {
+      if (this._canvas) {
+        container.appendChild(this._canvas.getCanvas());
+      }
+    } else {
+      if (this._svg) {
+        container.appendChild(this._svg.getElement());
+      }
     }
 
     this._container = container;
@@ -66,8 +83,6 @@ export default class QRCodeStyling {
     if (!this._drawingPromise) return;
 
     this._drawingPromise.then(() => {
-      if (!this._canvas) return;
-
       let extension = "png";
       let name = "qr";
 
@@ -86,8 +101,22 @@ export default class QRCodeStyling {
         }
       }
 
-      const data = this._canvas.getCanvas().toDataURL(`image/${extension}`);
-      downloadURI(data, `${name}.${extension}`);
+      if (this._options.type === drawTypes.canvas) {
+        if (!this._canvas) return;
+
+        const data = this._canvas.getCanvas().toDataURL(`image/${extension}`);
+        downloadURI(data, `${name}.${extension}`);
+      } else {
+        if (!this._svg) return;
+
+        //get svg source.
+        const serializer = new XMLSerializer();
+        let source = serializer.serializeToString(this._svg.getElement());
+
+        source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
+        const url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
+        downloadURI(url, `${name}.svg`);
+      }
     });
   }
 }
diff --git a/src/core/QROptions.ts b/src/core/QROptions.ts
@@ -1,4 +1,5 @@
 import qrTypes from "../constants/qrTypes";
+import drawTypes from "../constants/drawTypes";
 import errorCorrectionLevels from "../constants/errorCorrectionLevels";
 import {
   DotType,
@@ -7,7 +8,8 @@ import {
   CornerDotType,
   TypeNumber,
   ErrorCorrectionLevel,
-  Mode
+  Mode,
+  DrawType
 } from "../types";
 
 export type Gradient = {
@@ -57,6 +59,7 @@ export type Options = {
 };
 
 export interface RequiredOptions extends Options {
+  type: DrawType;
   width: number;
   height: number;
   margin: number;
@@ -84,6 +87,7 @@ export interface RequiredOptions extends Options {
 }
 
 const defaultOptions: RequiredOptions = {
+  type: drawTypes.canvas,
   width: 300,
   height: 300,
   data: "",