qreator 9.0.6

package/src/qr-base.ts

@@ -0,0 +1,180 @@
+import { encode } from "./encode.js";
+import { calculateEC } from "./errorcode.js";
+import { getMatrix } from "./matrix.js";
+import { Data, EcLevel, NumberData } from "./typing/types";
+
+interface LevelNumber {
+    [key: string]: Pick<Data, "data_len" | "ec_level">;
+}
+
+const EC_LEVELS: EcLevel[] = ["L", "M", "Q", "H"];
+
+// {{{1 Get version template
+export function getTemplate(message: NumberData, ec_level: EcLevel): Data {
+    let i = 1;
+    let len;
+
+    if (message.data1) {
+        len = Math.ceil(message.data1.length / 8);
+    } else {
+        i = 10;
+    }
+    for (; /* i */ i < 10; i++) {
+        let version = mappedVersions[i][ec_level];
+        if (version.data_len >= len) {
+            return deepCopy(version);
+        }
+    }
+
+    if (message.data10) {
+        len = Math.ceil(message.data10.length / 8);
+    } else {
+        i = 27;
+    }
+    for (; /* i */ i < 27; i++) {
+        let version = mappedVersions[i][ec_level];
+        if (version.data_len >= len) {
+            return deepCopy(version);
+        }
+    }
+
+    len = Math.ceil(message.data27.length / 8);
+    for (; /* i */ i < 41; i++) {
+        let version = mappedVersions[i][ec_level];
+        if (version.data_len >= len) {
+            return deepCopy(version);
+        }
+    }
+    throw new Error("Too much data");
+}
+
+// {{{1 Fill template
+export function fillTemplate(message: NumberData, template: Data): Data {
+    const blocks = new Uint8Array(template.data_len);
+    let messageUpdated: number[];
+
+    if (template.version < 10) {
+        messageUpdated = message.data1;
+    } else if (template.version < 27) {
+        messageUpdated = message.data10;
+    } else {
+        messageUpdated = message.data27;
+    }
+
+    const len = messageUpdated.length;
+
+    for (let i = 0; i < len; i += 8) {
+        let b = 0;
+        for (let j = 0; j < 8; j++) {
+            b = (b << 1) | (messageUpdated[i + j] ? 1 : 0);
+        }
+        blocks[i / 8] = b;
+    }
+
+    let pad = 236;
+    for (let i = Math.ceil((len + 4) / 8); i < blocks.length; i++) {
+        blocks[i] = pad;
+        pad = pad == 236 ? 17 : 236;
+    }
+
+    let offset = 0;
+    // TODO any
+    template.blocks = template.blocks.map((n: any) => {
+        const b = blocks.slice(offset, offset + n) as unknown as number[];
+        offset += n;
+        template.ec.push(
+            calculateEC(b, template.ec_len) as unknown as number[]
+        );
+        return b;
+    });
+
+    return template;
+}
+
+// {{{1 All-in-one
+export function QR(text: string, ec_level: EcLevel, parse_url: boolean) {
+    ec_level = EC_LEVELS.includes(ec_level) ? ec_level : "M";
+    const message = encode(text, parse_url);
+    const data = fillTemplate(message, getTemplate(message, ec_level));
+    return getMatrix(data);
+}
+
+const deepCopy = typeof structuredClone !== "undefined" ? structuredClone : ((obj: object) => JSON.parse(JSON.stringify(obj))) as typeof structuredClone;
+
+// {{{1 Versions
+const versions: (number[] | LevelNumber | {})[] = [
+    [], // there is no version 0
+    // total number of codewords, (number of ec codewords, number of blocks) * ( L, M, Q, H )
+    [26, 7, 1, 10, 1, 13, 1, 17, 1],
+    [44, 10, 1, 16, 1, 22, 1, 28, 1],
+    [70, 15, 1, 26, 1, 36, 2, 44, 2],
+    [100, 20, 1, 36, 2, 52, 2, 64, 4],
+    [134, 26, 1, 48, 2, 72, 4, 88, 4], // 5
+    [172, 36, 2, 64, 4, 96, 4, 112, 4],
+    [196, 40, 2, 72, 4, 108, 6, 130, 5],
+    [242, 48, 2, 88, 4, 132, 6, 156, 6],
+    [292, 60, 2, 110, 5, 160, 8, 192, 8],
+    [346, 72, 4, 130, 5, 192, 8, 224, 8], // 10
+    [404, 80, 4, 150, 5, 224, 8, 264, 11],
+    [466, 96, 4, 176, 8, 260, 10, 308, 11],
+    [532, 104, 4, 198, 9, 288, 12, 352, 16],
+    [581, 120, 4, 216, 9, 320, 16, 384, 16],
+    [655, 132, 6, 240, 10, 360, 12, 432, 18], // 15
+    [733, 144, 6, 280, 10, 408, 17, 480, 16],
+    [815, 168, 6, 308, 11, 448, 16, 532, 19],
+    [901, 180, 6, 338, 13, 504, 18, 588, 21],
+    [991, 196, 7, 364, 14, 546, 21, 650, 25],
+    [1085, 224, 8, 416, 16, 600, 20, 700, 25], // 20
+    [1156, 224, 8, 442, 17, 644, 23, 750, 25],
+    [1258, 252, 9, 476, 17, 690, 23, 816, 34],
+    [1364, 270, 9, 504, 18, 750, 25, 900, 30],
+    [1474, 300, 10, 560, 20, 810, 27, 960, 32],
+    [1588, 312, 12, 588, 21, 870, 29, 1050, 35], // 25
+    [1706, 336, 12, 644, 23, 952, 34, 1110, 37],
+    [1828, 360, 12, 700, 25, 1020, 34, 1200, 40],
+    [1921, 390, 13, 728, 26, 1050, 35, 1260, 42],
+    [2051, 420, 14, 784, 28, 1140, 38, 1350, 45],
+    [2185, 450, 15, 812, 29, 1200, 40, 1440, 48], // 30
+    [2323, 480, 16, 868, 31, 1290, 43, 1530, 51],
+    [2465, 510, 17, 924, 33, 1350, 45, 1620, 54],
+    [2611, 540, 18, 980, 35, 1440, 48, 1710, 57],
+    [2761, 570, 19, 1036, 37, 1530, 51, 1800, 60],
+    [2876, 570, 19, 1064, 38, 1590, 53, 1890, 63], // 35
+    [3034, 600, 20, 1120, 40, 1680, 56, 1980, 66],
+    [3196, 630, 21, 1204, 43, 1770, 59, 2100, 70],
+    [3362, 660, 22, 1260, 45, 1860, 62, 2220, 74],
+    [3532, 720, 24, 1316, 47, 1950, 65, 2310, 77],
+    [3706, 750, 25, 1372, 49, 2040, 68, 2430, 81], // 40
+];
+
+const mappedVersions = versions.map((el, index: number) => {
+    if (!index) {
+        return Object.create(null);
+    }
+
+    const res = Object.create(null) as {
+        [K in EcLevel]: Omit<Data, "blocks"> & { blocks: number[] };
+    };
+
+    for (let i = 1; i < 8; i += 2) {
+        const length = (el as number[])[0] - (el as number[])[i];
+        const num_template = (el as number[])[i + 1];
+        const ec_level = EC_LEVELS[(i / 2) | 0];
+        const level: Omit<Data, "blocks"> & { blocks: number[] } = {
+            version: index,
+            ec_level,
+            data_len: length,
+            ec_len: (el as number[])[i] / num_template,
+            blocks: [],
+            ec: [],
+        };
+
+        for (let k = num_template, n = length; k > 0; k--) {
+            const block = (n / k) | 0;
+            level.blocks.push(block);
+            n -= block;
+        }
+        res[ec_level] = level;
+    }
+    return res;
+});

package/src/qr.ts

@@ -0,0 +1,2 @@
+import { ImageOptions } from "./typing/types";
+export type QRImageOptions = Omit<ImageOptions, "type"> & Required<Pick<ImageOptions, "type">>;

package/src/svg.ts

@@ -0,0 +1,89 @@
+import { QR } from "./qr-base.js";
+import { ImageOptions, Matrix } from "./typing/types";
+import { getOptions, colorToHex, getSVGPath } from "./utils.js";
+import { Base64 } from 'js-base64';
+
+interface FillSVGOptions
+    extends Pick<ImageOptions, "color" | "bgColor" | "size" | "margin" | "borderRadius"> {
+    blockSize?: number;
+}
+
+export async function getSVG(text: string, inOptions: ImageOptions = {}) {
+    const options = getOptions({...inOptions, type: "svg"});
+    const matrix = QR(text, options.ec_level, options.parse_url);
+    return createSVG({ matrix, ...options });
+}
+
+const te = new TextEncoder();
+
+export async function createSVG({
+    matrix,
+    margin,
+    size,
+    logo,
+    logoWidth,
+    logoHeight,
+    color,
+    bgColor,
+    imageWidth,
+    imageHeight,
+    borderRadius,
+}: ImageOptions & {
+    matrix: Matrix;
+    imageWidth?: number;
+    imageHeight?: number;
+}): Promise<Uint8Array> {
+    const actualSize = size || 9;
+    const X = matrix.length + 2 * margin;
+    const XY = X * (actualSize || 1);
+    const imageWidthStr = imageWidth ? ` width="${imageWidth}"` : "";
+    const imageHeightStr = imageHeight ? `height="${imageWidth}" ` : "";
+    const xmlTag = `<?xml version="1.0" encoding="utf-8"?>`;
+    const svgOpeningTag = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"${imageWidthStr} ${imageHeightStr}viewBox="0 0 ${XY} ${XY}">`;
+    const svgBody = getSVGBody(matrix, {
+        color,
+        bgColor,
+        size: XY,
+        margin,
+        blockSize: actualSize,
+        borderRadius,
+    });
+    const svgEndTag = "</svg>";
+    const logoImage = logo ? getLogoImage(logo, XY, logoWidth, logoHeight) : "";
+
+    return te.encode(
+        xmlTag + svgOpeningTag + svgBody + logoImage + svgEndTag
+    );
+}
+
+function getSVGBody(matrix: Matrix, options: FillSVGOptions): string {
+    const path = getSVGPath(matrix, options.blockSize, options.margin * options.blockSize, options.borderRadius);
+    let svgBody =
+    `<rect width="${options.size}" height="${options.size}" ` +
+    `fill="${colorToHex(options.bgColor)}"></rect>`;
+    svgBody += '<path shape-rendering="geometricPrecision" d="' + path + '" fill="' + colorToHex(options.color) + '"/>';
+    return svgBody;
+}
+
+function getLogoImage(
+    logo: ImageOptions["logo"],
+    XY: number,
+    logoWidth: ImageOptions["logoWidth"],
+    logoHeight: ImageOptions["logoHeight"]
+): string {
+    const imageBase64 = `data:image/png;base64,${
+        typeof Buffer !== "undefined" && Buffer.isBuffer(logo)
+            ? logo.toString("base64")
+            : Base64.fromUint8Array(new Uint8Array(logo))
+    }`;
+
+    return (
+        `<image ` +
+        `width="${(logoWidth / 100) * XY}" ` +
+        `height="${(logoHeight / 100) * XY}" ` +
+        `xlink:href="${imageBase64}" ` +
+        `x="${XY / 2 - ((logoWidth / 100) * XY) / 2}" ` +
+        `y="${XY / 2 - ((logoHeight / 100) * XY) / 2}">` +
+        `</image>`
+    );
+}

package/src/tests/_common.ts

@@ -0,0 +1,40 @@
+import { ExecutionContext } from "ava";
+import looksSame from "looks-same";
+import { readFile } from "node:fs/promises";
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import * as diff from "diff";
+import XMLFormatter from "xml-formatter";
+import chalk from "chalk";
+chalk.level = 3;
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+export const goldenDir = `${__dirname}/../../test_data/golden`;
+export const generatedImageDir = `${__dirname}/../../test_data/generated`;
+
+export const assertEqual = async (t: ExecutionContext<unknown>, filename: string) => {
+    if (filename.endsWith(".png")) {
+        const lsRes = await looksSame(
+            `${generatedImageDir}/${filename}`,
+            `${goldenDir}/${filename}`,
+            { strict: true }
+        );
+        t.assert(lsRes.equal, `Images are different: ${filename}`);
+
+    } else if (!filename.endsWith("pdf")) {
+        const f1 = (await readFile(`${generatedImageDir}/${filename}`)).toString();
+        const f2 = (await readFile(`${goldenDir}/${filename}`)).toString();
+        if (f1 !== f2) {
+            for (const el of diff.diffLines(XMLFormatter(f1), XMLFormatter(f2), { newlineIsToken: true })) {
+                console.log(el.added ? chalk.bold.green(el.value) : chalk.bold.red(el.value));
+            };
+            t.fail(`Files are different: ${generatedImageDir}/${filename} and ${goldenDir}/${filename}`);
+        } else {
+            t.pass();
+        }
+    } else {
+        t.pass();
+    }
+};

package/src/tests/browser.test.ts

@@ -0,0 +1,209 @@
+import test from "ava";
+import { readFileSync } from "fs";
+import { writeFile } from "node:fs/promises";
+import { ImageType } from '../typing/types.js';
+import { QRImageOptions } from '../qr.js';
+import { JSDOM } from 'jsdom';
+import { assertEqual, generatedImageDir, goldenDir } from "./_common.js";
+import { Path2D } from "canvas";
+
+let functions: Record<ImageType, (text: string, options: QRImageOptions) => Promise<ArrayBuffer>>;
+const { window } = new JSDOM(``, { runScripts: "dangerously", resources: "usable" });
+
+test.before(async () => {
+    window.globalThis.TextEncoder = TextEncoder;
+    window.globalThis.TextDecoder = TextDecoder;
+    window.globalThis.Path2D = Path2D;
+
+    for (const scriptType of ['png', 'svg', 'pdf']) {
+        const scriptEl = window.document.createElement('script')
+        scriptEl.textContent = readFileSync(`./lib/browser/${scriptType}.umd.js`).toString()
+        scriptEl.type = 'text/javascript'
+        window.document.body.appendChild(scriptEl);
+    }
+    functions = {
+        "png": window.globalThis.pngQrCode.getPNG,
+        "svg": window.globalThis.svgQrCode.getSVG,
+        "pdf": window.globalThis.pdfQrCode.getPDF,
+    };
+})
+
+
+const text = "I \u2764\uFE0F QR code!";
+// const text = 'https://yadi.sk/d/FuzPeEg-QyaZN?qr';
+interface TestParams {
+    name: string;
+    type: ImageType;
+    filename: string;
+    params: QRImageOptions;
+}
+
+const defaultParams = {
+    ec_level: "Q" as const,
+    margin: 1,
+    parse_url: true,
+};
+
+([
+    {
+        name: "PNG",
+        type: "png",
+        filename: "qr.png",
+
+    },
+    {
+        name: "PNG with border radius",
+        type: "png",
+        filename: "qr_with_border_radius.png",
+        params: {
+            borderRadius: 3,
+        }
+    },
+    {
+        name: "PNG with colors",
+        type: "png",
+        filename: "qr_with_colors.png",
+        params: {
+            color: 0x0000a0ff,
+            bgColor: 0xffa0ffff,
+        },
+    },
+    {
+        name: "PNG with colors (hex)",
+        type: "png",
+        filename: "qr_with_colors.png",
+        params: {
+            color: '#0000a0',
+            bgColor: '#ffa0ff',
+        },
+    },
+    {
+        name: "PNG with logo (PNG)",
+        type: "png",
+        filename: "qr_with_logo.png",
+        params: { logo: readFileSync(`${goldenDir}/logo.png`).buffer },
+    },
+    {
+        name: "PNG with logo (JPG)",
+        type: "png",
+        filename: "qr_with_logo_jpg.png",
+        params: { logo: readFileSync(`${goldenDir}/logo.jpg`).buffer },
+    },
+    {
+        name: "PNG with colors (rgba)",
+        type: "png",
+        filename: "qr_with_colors_rgba.png",
+        params: {
+            color: 'rgba(255, 0, 0, 0.5)',
+            bgColor: 'rgba(255, 255, 255, 0.1)',
+        },
+    },
+    {
+        name: "SVG",
+        type: "svg",
+        filename: "qr.svg",
+    },
+    {
+        name: "SVG with border radius",
+        type: "svg",
+        filename: "qr_with_border_radius.svg",
+        params: {
+            borderRadius: 2,
+        }
+    },
+    {
+        name: "SVG with EC level",
+        type: "svg",
+        filename: "qr_with_ec_level.svg",
+        params: {
+            ec_level: "H",
+        },
+    },
+    {
+        name: "SVG with size",
+        type: "svg",
+        filename: "qr_with_size.svg",
+        params: {
+            size: 6,
+        },
+    },
+    {
+        name: "SVG with colors (hex)",
+        type: "svg",
+        filename: "qr_with_colors_hex.svg",
+        params: {
+            color: '#ff0000',
+            bgColor: '#00ff00',
+        },
+    },
+    {
+        name: "SVG with colors (number)",
+        type: "svg",
+        filename: "qr_with_colors.svg",
+        params: {
+            color: 0xff0000ff,
+            bgColor: 0x00ff00ff,
+        },
+    },
+    {
+        name: "SVG with logo as arraybuffer (PNG)",
+        type: "svg",
+        filename: "qr_with_logo_as_arraybuffer.svg",
+        params: {
+            logo: readFileSync(`${goldenDir}/logo.png`).buffer,
+        },
+    },
+    {
+        name: "SVG with logo as arraybuffer (JPG)",
+        type: "svg",
+        filename: "qr_with_logo_as_arraybuffer_jpg.svg",
+        params: {
+            logo: readFileSync(`${goldenDir}/logo.jpg`).buffer,
+        },
+    },
+    {
+        name: "PDF",
+        type: "pdf",
+        filename: "qr.pdf",
+    },
+    {
+        name: "PDF with border radius",
+        type: "pdf",
+        filename: "qr_with_border_radius.pdf",
+        params: {
+            borderRadius: 2,
+        }
+    },
+    {
+        name: "PDF with colors",
+        type: "pdf",
+        filename: "qr_with_colors.pdf",
+        params: { color: 0xff0000ff, bgColor: 0x00ff00ff },
+    },
+    {
+        name: "PDF with arraybuffer",
+        type: "pdf",
+        filename: "qr_logo_arraybuffer.pdf",
+        params: {
+            logo: new window.Uint8Array(readFileSync(`${goldenDir}/logo.png`).buffer),
+        },
+    },
+    {
+        name: "PDF with arraybuffer (JPG)",
+        type: "pdf",
+        filename: "qr_logo_arraybuffer.pdf",
+        params: {
+            logo: new window.Uint8Array(readFileSync(`${goldenDir}/logo.jpg`).buffer),
+        },
+    },
+] as TestParams[]) .forEach((testData) => {
+    test(`browser > ${testData.name}`, async (t) => {
+        const image = await functions[testData.type](text, {
+            type: testData.type,
+            ...defaultParams,
+            ...testData.params,
+        });
+        await writeFile(`${generatedImageDir}/browser_${testData.filename}`, new Uint8Array(image));
+        await assertEqual(t, 'browser_' + testData.filename);
+    });
+});