#39 Add getRawData method. Update to v1.5.0

kozakdenys · May 29, 2021 · c265dd4 · c265dd4
1 parent 2e3d6b3
commit c265dd4
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -27,7 +27,7 @@ npm install qr-code-styling
 <head>
     <meta charset="UTF-8">
     <title>QR Code Styling</title>
-    <script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.4.4/lib/qr-code-styling.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>
 </head>
 <body>
 <div id="canvas"></div>
@@ -186,13 +186,19 @@ Param    |Type       |Description
 ---------|-----------|-----------
 container|DOM element|This container will be used for appending of the QR code
 
+`QRCodeStyling.getRawData(extension) => Promise<Blob>`
+
+Param    |Type                                |Default Value|Description
+---------|------------------------------------|-------------|------------
+extension|string (`'png' 'jpeg' 'webp' 'svg'`)|`'png'`      |Blob type
+
 `QRCodeStyling.update(options) => void`
 
 Param  |Type  |Description
 -------|------|--------------------------------------
 options|object|The same options as for initialization
 
-`QRCodeStyling.download(downloadOptions) => void`
+`QRCodeStyling.download(downloadOptions) => Promise<void>`
 
 Param          |Type  |Description
 ---------------|------|------------

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "qr-code-styling",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "description": "Add a style and an image to your QR code",
   "main": "lib/qr-code-styling.js",
   "types": "lib/index.d.ts",

diff --git a/src/core/QRCodeStyling.ts b/src/core/QRCodeStyling.ts
@@ -7,7 +7,7 @@ import drawTypes from "../constants/drawTypes";
 
 import defaultOptions, { RequiredOptions } from "./QROptions";
 import sanitizeOptions from "../tools/sanitizeOptions";
-import { QRCode, Options, DownloadOptions } from "../types";
+import { Extension, QRCode, Options, DownloadOptions } from "../types";
 import qrcode from "qrcode-generator";
 
 export default class QRCodeStyling {
@@ -30,6 +30,40 @@ export default class QRCodeStyling {
     }
   }
 
+  async _getQRStylingElement(extension: Extension = "png"): Promise<QRCanvas | QRSVG> {
+    if (!this._qr) throw "QR code is empty";
+
+    if (extension.toLowerCase() === "svg") {
+      let promise, svg: QRSVG;
+
+      if (this._svg && this._svgDrawingPromise) {
+        svg = this._svg;
+        promise = this._svgDrawingPromise;
+      } else {
+        svg = new QRSVG(this._options);
+        promise = svg.drawQR(this._qr);
+      }
+
+      await promise;
+
+      return svg;
+    } else {
+      let promise, canvas: QRCanvas;
+
+      if (this._canvas && this._canvasDrawingPromise) {
+        canvas = this._canvas;
+        promise = this._canvasDrawingPromise;
+      } else {
+        canvas = new QRCanvas(this._options);
+        promise = canvas.drawQR(this._qr);
+      }
+
+      await promise;
+
+      return canvas;
+    }
+  }
+
   update(options?: Partial<Options>): void {
     QRCodeStyling._clearContainer(this._container);
     this._options = options ? sanitizeOptions(mergeDeep(this._options, options) as RequiredOptions) : this._options;
@@ -79,14 +113,30 @@ export default class QRCodeStyling {
     this._container = container;
   }
 
-  download(downloadOptions?: Partial<DownloadOptions> | string): void {
+  async getRawData(extension: Extension = "png"): Promise<Blob | null> {
     if (!this._qr) throw "QR code is empty";
-    let extension = "png";
+    const element = await this._getQRStylingElement(extension);
+
+    if (extension.toLowerCase() === "svg") {
+      const serializer = new XMLSerializer();
+      const source = serializer.serializeToString(((element as unknown) as QRSVG).getElement());
+
+      return new Blob(['<?xml version="1.0" standalone="no"?>\r\n' + source], { type: "image/svg+xml" });
+    } else {
+      return new Promise((resolve) =>
+        ((element as unknown) as QRCanvas).getCanvas().toBlob(resolve, `image/${extension}`, 1)
+      );
+    }
+  }
+
+  async download(downloadOptions?: Partial<DownloadOptions> | string): Promise<void> {
+    if (!this._qr) throw "QR code is empty";
+    let extension = "png" as Extension;
     let name = "qr";
 
     //TODO remove deprecated code in the v2
     if (typeof downloadOptions === "string") {
-      extension = downloadOptions;
+      extension = downloadOptions as Extension;
       console.warn(
         "Extension is deprecated as argument for 'download' method, please pass object { name: '...', extension: '...' } as argument"
       );
@@ -99,41 +149,18 @@ export default class QRCodeStyling {
       }
     }
 
-    if (extension.toLowerCase() === "svg") {
-      let promise, svg: QRSVG;
+    const element = await this._getQRStylingElement(extension);
 
-      if (this._svg && this._svgDrawingPromise) {
-        svg = this._svg;
-        promise = this._svgDrawingPromise;
-      } else {
-        svg = new QRSVG(this._options);
-        promise = svg.drawQR(this._qr);
-      }
-
-      promise?.then(() => {
-        //get svg source.
-        const serializer = new XMLSerializer();
-        let source = serializer.serializeToString(svg.getElement());
+    if (extension.toLowerCase() === "svg") {
+      const serializer = new XMLSerializer();
+      let source = serializer.serializeToString(((element as unknown) as QRSVG).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`);
-      });
+      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`);
     } else {
-      let promise, canvas: QRCanvas;
-
-      if (this._canvas && this._canvasDrawingPromise) {
-        canvas = this._canvas;
-        promise = this._canvasDrawingPromise;
-      } else {
-        canvas = new QRCanvas(this._options);
-        promise = canvas.drawQR(this._qr);
-      }
-
-      promise?.then(() => {
-        const data = canvas.getCanvas().toDataURL(`image/${extension}`);
-        downloadURI(data, `${name}.${extension}`);
-      });
+      const url = ((element as unknown) as QRCanvas).getCanvas().toDataURL(`image/${extension}`);
+      downloadURI(url, `${name}.${extension}`);
     }
   }
 }