qr-code-styling-node - npm Package Compare versions

Comparing version 1.3.4 to 1.5.0

lib/core/QRCanvas.d.ts

@@ -1,6 +0,5 @@
-import { RequiredOptions, Gradient } from "./QROptions";
-import { QRCode } from "../types";
-declare type FilterFunction = (i: number, j: number) => boolean;
+import { RequiredOptions } from "./QROptions";
+import { QRCode, Gradient, FilterFunction, Canvas } from "../types";
 export default class QRCanvas {
-    _canvas: HTMLCanvasElement;
+    _canvas: Canvas;
     _options: RequiredOptions;
@@ -13,3 +12,3 @@ _qr?: QRCode;
     get height(): number;
-    getCanvas(): HTMLCanvasElement;
+    getCanvas(): Canvas;
     clear(): void;
@@ -36,2 +35,1 @@ drawQR(qr: QRCode): Promise<void>;
 }
-export {};

lib/core/QRCodeStyling.d.ts

@@ -0,8 +1,6 @@
+/// <reference types="node" />
 import QRCanvas from "./QRCanvas";
-import { Options, RequiredOptions } from "./QROptions";
-import { Extension, QRCode } from "../types";
-declare type DownloadOptions = {
-    name?: string;
-    extension?: Extension;
-};
+import QRSVG from "./QRSVG";
+import { RequiredOptions } from "./QROptions";
+import { Extension, QRCode, Options, DownloadOptions } from "../types";
 export default class QRCodeStyling {
@@ -12,10 +10,13 @@ _options: RequiredOptions;
     _canvas?: QRCanvas;
+    _svg?: QRSVG;
     _qr?: QRCode;
-    _drawingPromise?: Promise<void>;
+    _canvasDrawingPromise?: Promise<void>;
+    _svgDrawingPromise?: Promise<void>;
     constructor(options?: Partial<Options>);
     static _clearContainer(container?: HTMLElement): void;
+    _getQRStylingElement(extension?: Extension): Promise<QRCanvas | QRSVG>;
     update(options?: Partial<Options>): void;
     append(container?: HTMLElement): void;
-    download(downloadOptions?: Partial<DownloadOptions> | string): void;
+    getRawData(extension?: Extension): Promise<Blob | Buffer | null>;
+    download(downloadOptions?: Partial<DownloadOptions> | string): Promise<void>;
 }
-export {};

lib/core/QROptions.d.ts

@@ -1,47 +0,4 @@
-import { DotType, GradientType, CornerSquareType, CornerDotType, TypeNumber, ErrorCorrectionLevel, Mode } from "../types";
-export declare type Gradient = {
-    type: GradientType;
-    rotation?: number;
-    colorStops: {
-        offset: number;
-        color: string;
-    }[];
-};
-export declare type Options = {
-    width?: number;
-    height?: number;
-    data?: string;
-    image?: string;
-    qrOptions?: {
-        typeNumber?: TypeNumber;
-        mode?: Mode;
-        errorCorrectionLevel?: ErrorCorrectionLevel;
-    };
-    imageOptions?: {
-        hideBackgroundDots?: boolean;
-        imageSize?: number;
-        crossOrigin?: string;
-        margin?: number;
-    };
-    dotsOptions?: {
-        type?: DotType;
-        color?: string;
-        gradient?: Gradient;
-    };
-    cornersSquareOptions?: {
-        type?: CornerSquareType;
-        color?: string;
-        gradient?: Gradient;
-    };
-    cornersDotOptions?: {
-        type?: CornerDotType;
-        color?: string;
-        gradient?: Gradient;
-    };
-    backgroundOptions?: {
-        color?: string;
-        gradient?: Gradient;
-    };
-};
+import { DotType, Options, TypeNumber, ErrorCorrectionLevel, Mode, DrawType, Gradient } from "../types";
 export interface RequiredOptions extends Options {
+    type: DrawType;
     width: number;
@@ -57,2 +14,3 @@ height: number;
     imageOptions: {
+        saveAsBlob: boolean;
         hideBackgroundDots: boolean;
@@ -59,0 +17,0 @@ imageSize: number;

lib/index.d.ts

@@ -9,3 +9,5 @@ import QRCodeStyling from "./core/QRCodeStyling";
 import qrTypes from "./constants/qrTypes";
-export { dotTypes, cornerDotTypes, cornerSquareTypes, errorCorrectionLevels, errorCorrectionPercents, modes, qrTypes };
+import drawTypes from "./constants/drawTypes";
+export * from "./types";
+export { dotTypes, cornerDotTypes, cornerSquareTypes, errorCorrectionLevels, errorCorrectionPercents, modes, qrTypes, drawTypes };
 export default QRCodeStyling;

lib/types/index.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="node" />
 export interface UnknownObject {
@@ -7,4 +8,32 @@ [key: string]: any;
 export declare type CornerSquareType = "dot" | "square" | "extra-rounded";
-export declare type Extension = "png" | "jpeg" | "webp";
+export declare type Extension = "svg" | "png" | "jpeg" | "webp";
 export declare type GradientType = "radial" | "linear";
+export declare type DrawType = "canvas" | "svg";
+export interface Canvas extends HTMLCanvasElement {
+    toBuffer?: (type: string) => Buffer;
+    createCanvas?: (width: number, height: number) => Canvas;
+    loadImage?: (image: string) => Promise<HTMLImageElement>;
+}
+export interface Window {
+    Image: typeof HTMLImageElement;
+    XMLSerializer: typeof XMLSerializer;
+    document: Document;
+}
+interface JsDomOptions {
+    resources: string;
+}
+export declare class JSDom {
+    window: Window;
+    _options: JsDomOptions;
+    _input: string;
+    constructor(input: string, options: JsDomOptions);
+}
+export declare type Gradient = {
+    type: GradientType;
+    rotation?: number;
+    colorStops: {
+        offset: number;
+        color: string;
+    }[];
+};
 export interface DotTypes {
@@ -22,2 +51,5 @@ [key: string]: DotType;
 }
+export interface DrawTypes {
+    [key: string]: DrawType;
+}
 export declare type TypeNumber = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40;
@@ -43,1 +75,78 @@ export declare type ErrorCorrectionLevel = "L" | "M" | "Q" | "H";
 }
+export declare type Options = {
+    type?: DrawType;
+    width?: number;
+    height?: number;
+    margin?: number;
+    data?: string;
+    image?: string;
+    nodeCanvas?: Canvas;
+    jsdom?: typeof JSDom;
+    qrOptions?: {
+        typeNumber?: TypeNumber;
+        mode?: Mode;
+        errorCorrectionLevel?: ErrorCorrectionLevel;
+    };
+    imageOptions?: {
+        saveAsBlob?: boolean;
+        hideBackgroundDots?: boolean;
+        imageSize?: number;
+        crossOrigin?: string;
+        margin?: number;
+    };
+    dotsOptions?: {
+        type?: DotType;
+        color?: string;
+        gradient?: Gradient;
+    };
+    cornersSquareOptions?: {
+        type?: CornerSquareType;
+        color?: string;
+        gradient?: Gradient;
+    };
+    cornersDotOptions?: {
+        type?: CornerDotType;
+        color?: string;
+        gradient?: Gradient;
+    };
+    backgroundOptions?: {
+        color?: string;
+        gradient?: Gradient;
+    };
+};
+export declare type FilterFunction = (i: number, j: number) => boolean;
+export declare type DownloadOptions = {
+    name?: string;
+    extension?: Extension;
+};
+export declare type DrawArgs = {
+    x: number;
+    y: number;
+    size: number;
+    rotation?: number;
+    getNeighbor?: GetNeighbor;
+};
+export declare type BasicFigureDrawArgs = {
+    x: number;
+    y: number;
+    size: number;
+    rotation?: number;
+};
+export declare type RotateFigureArgs = {
+    x: number;
+    y: number;
+    size: number;
+    rotation?: number;
+    draw: () => void;
+};
+export declare type DrawArgsCanvas = DrawArgs & {
+    context: CanvasRenderingContext2D;
+};
+export declare type BasicFigureDrawArgsCanvas = BasicFigureDrawArgs & {
+    context: CanvasRenderingContext2D;
+};
+export declare type RotateFigureArgsCanvas = RotateFigureArgs & {
+    context: CanvasRenderingContext2D;
+};
+export declare type GetNeighbor = (x: number, y: number) => boolean;
+export {};

package.json

 {
   "name": "qr-code-styling-node",
-  "version": "1.3.4",
+  "version": "1.5.0",
   "description": "Add a style and an image to your QR code",
@@ -16,3 +16,3 @@ "main": "lib/qr-code-styling.js",
     "@typescript-eslint/parser": "^4.13.0",
-    "canvas": "^2.6.1",
+    "canvas": "^2.7.0",
     "clean-webpack-plugin": "^3.0.0",
@@ -24,5 +24,7 @@ "eslint": "^7.17.0",
     "eslint-plugin-prettier": "^3.3.1",
+    "filemanager-webpack-plugin": "^4.0.0",
     "html-webpack-plugin": "^4.5.1",
     "jest": "^26.6.3",
     "jest-environment-jsdom-fifteen": "^1.0.0",
+    "jsdom": "^16.6.0",
     "prettier": "^2.2.1",
@@ -40,2 +42,3 @@ "ts-jest": "^26.4.4",
     "build:dev": "webpack --mode=development --config webpack.config.build.js",
+    "prepare": "npm run build",
     "test": "jest",
@@ -42,0 +45,0 @@ "start": "webpack serve --open --config webpack.config.dev-server.js"

README.md

@@ -30,3 +30,3 @@ # QR Code Styling
     <title>QR Code Styling</title>
-    <script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.3.3/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>
@@ -40,2 +40,3 @@ <body>
         height: 300,
+        type: "svg",
         data: "https://www.facebook.com/",
@@ -57,2 +58,3 @@ image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
     qrCode.append(document.getElementById("canvas"));
+    qrCode.download({ name: "qr", extension: "svg" });
 </script>
@@ -62,5 +64,18 @@ </body>
 ```
+---
 
-[**Usage with React**](https://codesandbox.io/s/qr-code-styling-react-example-l8rwl?file=/src/App.js)
+[**React example (Codesandbox)**](https://codesandbox.io/s/qr-code-styling-react-example-l8rwl?file=/src/App.js)
 
+[**Angular example (Codesandbox)**](https://codesandbox.io/s/agitated-panini-tpgb2?file=/src/app/app.component.ts)
+
+---
+
+[**React example (source)**](https://github.com/kozakdenys/qr-code-styling-examples/tree/master/examples/react)
+
+[**Angular example (source)**](https://github.com/kozakdenys/qr-code-styling-examples/tree/master/examples/angular)
+
+[**Vue example (source)**](https://github.com/kozakdenys/qr-code-styling-examples/tree/master/examples/vue)
+
+---
+
 ### API Documentation
@@ -77,15 +92,18 @@
 
-Property               |Type  |Default Value|Description
------------------------|------|-------------|-----------------------------------------------------
-width                  |number|`300`        |Size of canvas
-height                 |number|`300`        |Size of canvas
-data                   |string|             |The date will be encoded to the QR code
-image                  |string|             |The image will be copied to the center of the QR code
-margin                 |number|`0`          |Margin around canvas
-qrOptions              |object|             |Options will be passed to `qrcode-generator` lib
-imageOptions           |object|             |Specific image options, details see below
-dotsOptions            |object|             |Dots styling options
-cornersSquareOptions   |object|             |Square in the corners styling options
-cornersDotOptionsHelper|object|             |Dots in the corners styling options
-backgroundOptions      |object|             |QR background styling options
+Property               |Type                     |Default Value|Description
+-----------------------|-------------------------|-------------|-----------------------------------------------------
+width                  |number                   |`300`        |Size of canvas
+height                 |number                   |`300`        |Size of canvas
+type                   |string (`'canvas' 'svg'`)|`canvas`     |The type of the element that will be rendered
+data                   |string                   |             |The date will be encoded to the QR code
+image                  |string                   |             |The image will be copied to the center of the QR code
+margin                 |number                   |`0`          |Margin around canvas
+qrOptions              |object                   |             |Options will be passed to `qrcode-generator` lib
+imageOptions           |object                   |             |Specific image options, details see below
+dotsOptions            |object                   |             |Dots styling options
+cornersSquareOptions   |object                   |             |Square in the corners styling options
+cornersDotOptionsHelper|object                   |             |Dots in the corners styling options
+backgroundOptions      |object                   |             |QR background styling options
+nodeCanvas             |node-canvas              |             |Only specify when running on a node server for canvas type, please refer to node section below
+jsDom                  |jsdom                    |             |Only specify when running on a node server for svg type, please refer to node section below
 
@@ -108,3 +126,6 @@ `options.qrOptions` structure
 crossOrigin       |string(`'anonymous' 'use-credentials'`)|             |Set "anonymous" if you want to download QR code from other origins.
+saveAsBlob        |boolean                                |`false`      |Saves image as base64 blob in svg type, see bellow
 
+When QR type is svg, the image may not load in certain applications as it is saved as a url, and some svg applications will not render url images for security reasons. Setting `saveAsBlob` to true will instead save the image as a blob, allowing it to render correctly in more places, but will also increase the file size.
+
 `options.dotsOptions` structure
@@ -179,2 +200,8 @@
 
+`QRCodeStyling.getRawData(extension) => Promise<Blob>`
+
+Param    |Type                                |Default Value|Description
+---------|------------------------------------|-------------|------------
+extension|string (`'png' 'jpeg' 'webp' 'svg'`)|`'png'`      |Blob type on browser, Buffer type on Node
+
 `QRCodeStyling.update(options) => void`
@@ -186,3 +213,3 @@
 
-`QRCodeStyling.download(downloadOptions) => void`
+`QRCodeStyling.download(downloadOptions) => Promise<void>`
 
@@ -193,10 +220,81 @@ Param          |Type  |Description
 
+Promise returned will resolve into the data URI of the QR code image.
+
 `downloadOptions` structure
 
-Property |Type                          |Default Value|Description
----------|------------------------------|-------------|-----------------------------------------------------
-name     |string                        |`'qr'`       |Name of the downloaded file
-extension|string (`'png' 'jpeg' 'webp'`)|`'png'`      |File extension
+Property |Type                                |Default Value|Description
+---------|------------------------------------|-------------|-----------------------------------------------------
+name     |string                              |`'qr'`       |Name of the downloaded file
+extension|string (`'png' 'jpeg' 'webp' 'svg'`)|`'png'`      |File extension
 
+### Node Support
+You can use this on a node server by passing through the node-canvas or jsdom object depending if your creating a non-svg or svg respectively. You must pass both if using `imageOptions.saveAsBlob`.
 
+Calling `getRawData` in node will return a Buffer instead of a Blob.
+
+```js
+const { QRCodeStyling } = require("qr-code-styling/lib/qr-code-styling.common.js");
+const nodeCanvas = require("canvas");
+const { JSDOM } = require("jsdom");
+const fs = require("fs");
+
+const options = {
+    width: 300,
+    height: 300,
+    data: "https://www.facebook.com/",
+    image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
+    dotsOptions: {
+        color: "#4267b2",
+        type: "rounded"
+    },
+    backgroundOptions: {
+        color: "#e9ebee",
+    },
+    imageOptions: {
+        crossOrigin: "anonymous",
+        margin: 20
+    }
+}
+
+// For canvas type
+const qrCodeImage = new QRCodeStyling({
+    nodeCanvas, // this is required
+    ...options
+});
+
+qrCodeImage.getRawData("png").then((buffer) => {
+  fs.writeFileSync("test.png", buffer);
+});
+
+// For svg type
+const qrCodeSvg = new QRCodeStyling({
+    jsdom: JSDOM, // this is required
+    type: "svg",
+    ...options
+});
+
+qrCodeSvg.getRawData("svg").then((buffer) => {
+  fs.writeFileSync("test.svg", buffer);
+});
+
+// For svg type with the inner-image saved as a blob
+// (inner-image will render in more places but file will be larger)
+const qrCodeSvgWithBlobImage = new QRCodeStyling({
+    jsdom: JSDOM, // this is required
+    nodeCanvas, // this is required
+    type: "svg",
+    ...options,
+    imageOptions: {
+        saveAsBlob: true,
+        crossOrigin: "anonymous",
+        margin: 20
+    }
+});
+
+qrCodeSvgWithBlobImage.getRawData("svg").then((buffer) => {
+  fs.writeFileSync("test_blob.svg", buffer);
+});
+
+```
+
 ### License
@@ -203,0 +301,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

34

increased by30.77%

Lines of code

594

increased by13.14%

Number of lines in readme file

295

increased by49.75%

Worsened metrics

Total package byte prevSize

171269

decreased by-26.74%

Dev dependency count

22

increased by10%

No dependency changes