From 91e299c30b39d79392a59b47a02f3cc09303394a Mon Sep 17 00:00:00 2001 From: Denys Kozak Date: Fri, 18 Oct 2024 21:12:14 +0300 Subject: [PATCH] Issue 238. Remove toDataUrl call --- README.md | 10 ++++++++-- package-lock.json | 45 +++++++++++++++++++++++++++++++++------------ package.json | 1 + src/core/QRSVG.ts | 5 ----- src/types/index.ts | 27 ++++----------------------- 5 files changed, 46 insertions(+), 42 deletions(-) diff --git a/README.md b/README.md index d4ed7f39..9b9d58be 100644 --- a/README.md +++ b/README.md @@ -296,8 +296,14 @@ const options = { // For canvas type const qrCodeImage = new QRCodeStyling({ - nodeCanvas, // this is required - ...options + jsdom: JSDOM, // this is required + nodeCanvas, // this is required, + ...options, + imageOptions: { + saveAsBlob: true, + crossOrigin: "anonymous", + margin: 20 + }, }); qrCodeImage.getRawData("png").then((buffer) => { diff --git a/package-lock.json b/package-lock.json index 4057c764..1036223e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "devDependencies": { "@eslint/js": "^9.12.0", "@types/eslint__js": "^8.42.3", + "@types/jsdom": "^21.1.7", "canvas": "^2.11.2", "eslint": "^9.12.0", "eslint-config-prettier": "^9.1.0", @@ -1865,11 +1866,10 @@ } }, "node_modules/@types/jsdom": { - "version": "20.0.1", - "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-20.0.1.tgz", - "integrity": "sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==", + "version": "21.1.7", + "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.7.tgz", + "integrity": "sha512-yOriVnggzrnQ3a9OKOCxaVuSug3w3/SbOj5i7VwXWZEyUNl3bLF9V3MfxGbZKuwqJOQyRfqXyROBB1CoZLFWzA==", "dev": true, - "peer": true, "dependencies": { "@types/node": "*", "@types/tough-cookie": "*", @@ -1979,8 +1979,7 @@ "version": "4.0.5", "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz", "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==", - "dev": true, - "peer": true + "dev": true }, "node_modules/@types/ws": { "version": "8.5.12", @@ -7200,6 +7199,18 @@ } } }, + "node_modules/jest-environment-jsdom/node_modules/@types/jsdom": { + "version": "20.0.1", + "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-20.0.1.tgz", + "integrity": "sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==", + "dev": true, + "peer": true, + "dependencies": { + "@types/node": "*", + "@types/tough-cookie": "*", + "parse5": "^7.0.0" + } + }, "node_modules/jest-environment-jsdom/node_modules/cssstyle": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz", @@ -13352,11 +13363,10 @@ } }, "@types/jsdom": { - "version": "20.0.1", - "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-20.0.1.tgz", - "integrity": "sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==", + "version": "21.1.7", + "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.7.tgz", + "integrity": "sha512-yOriVnggzrnQ3a9OKOCxaVuSug3w3/SbOj5i7VwXWZEyUNl3bLF9V3MfxGbZKuwqJOQyRfqXyROBB1CoZLFWzA==", "dev": true, - "peer": true, "requires": { "@types/node": "*", "@types/tough-cookie": "*", @@ -13466,8 +13476,7 @@ "version": "4.0.5", "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz", "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==", - "dev": true, - "peer": true + "dev": true }, "@types/ws": { "version": "8.5.12", @@ -17268,6 +17277,18 @@ "jsdom": "^20.0.0" }, "dependencies": { + "@types/jsdom": { + "version": "20.0.1", + "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-20.0.1.tgz", + "integrity": "sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==", + "dev": true, + "peer": true, + "requires": { + "@types/node": "*", + "@types/tough-cookie": "*", + "parse5": "^7.0.0" + } + }, "cssstyle": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz", diff --git a/package.json b/package.json index 90c64dbd..026b9cf0 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "devDependencies": { "@eslint/js": "^9.12.0", "@types/eslint__js": "^8.42.3", + "@types/jsdom": "^21.1.7", "canvas": "^2.11.2", "eslint": "^9.12.0", "eslint-config-prettier": "^9.1.0", diff --git a/src/core/QRSVG.ts b/src/core/QRSVG.ts index f063a232..cc23ba23 100644 --- a/src/core/QRSVG.ts +++ b/src/core/QRSVG.ts @@ -1,5 +1,4 @@ import calculateImageSize from "../tools/calculateImageSize"; -import toDataUrl from "../tools/toDataUrl"; import errorCorrectionPercents from "../constants/errorCorrectionPercents"; import QRDot from "../figures/dot/QRDot"; import QRCornerSquare from "../figures/cornerSquare/QRCornerSquare"; @@ -531,10 +530,6 @@ export default class QRSVG { image.setAttribute("width", `${dw}px`); image.setAttribute("height", `${dh}px`); - const imageUrl = await toDataUrl(options.image || ""); - - image.setAttribute("href", imageUrl || ""); - this._element.appendChild(image); } diff --git a/src/types/index.ts b/src/types/index.ts index 717ff8e4..d26a9561 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,3 +1,5 @@ +import { DOMWindow, JSDOM } from "jsdom"; + export interface UnknownObject { // eslint-disable-next-line @typescript-eslint/no-explicit-any [key: string]: any; @@ -16,28 +18,7 @@ export interface Canvas extends HTMLCanvasElement { createCanvas?: (width: number, height: number) => Canvas; loadImage?: (image: string) => Promise; } - -export interface Window { - Image: typeof HTMLImageElement; - XMLSerializer: typeof XMLSerializer; - document: Document; -} -declare const window: Window; - -interface JsDomOptions { - resources: string; -} -export class JSDom { - window: Window; - _options: JsDomOptions; - _input: string; - - constructor(input: string, options: JsDomOptions) { - this._options = options; - this._input = input; - this.window = window; - } -} +export type Window = DOMWindow; export type Gradient = { type: GradientType; @@ -140,7 +121,7 @@ export type Options = { data?: string; image?: string; nodeCanvas?: Canvas; - jsdom?: typeof JSDom; + jsdom?: typeof JSDOM; qrOptions?: { typeNumber?: TypeNumber; mode?: Mode;