qreator

QR Code generator for browser and node.js with tree shaking and logo support

Classic	Rounded	Custom finders	Logo overlay
Label: below	Label: pill	Label: box	Branded

Overview

• generate image in png, svg and pdf formats
• numeric and alphanumeric modes
• support UTF-8
• supports color customization
• supports logos
• supports border-radius
• supports corner mode (merged rounded corners)
• supports finder pattern customization (shape + color)
• supports text labels (below, pill, box styles)
• optional React component
• tree shaking support
• browser / node.js

Releases

Installing

npm install qreator
# or
yarn add qreator

Usage

Example:

import { getSVG } from "qreator/lib/svg";
import { getPNG } from "qreator/lib/png"; // imports canvas implementation in browser and sharp module in node.js
import { getPDF } from "qreator/lib/pdf"; // this import is large, consider async import
const svgString = await getSVG("I love QR", {
    logo: fs.openFileSync("my-logo.svg"),
    color: "#000000",
    bgColor: "#FFFFFF",
});
const pngBuffer = await getPNG("I love QR", {
    logo: fs.openFileSync("my-logo.svg"),
    color: "rgb(0, 0, 0)",
    bgColor: "rgb(255, 255, 255)",
});

Label

const png = await getPNG("https://example.com", {
    labelText: "SCAN ME",
    labelStyle: "pill", // "below", "pill", or "box"
});

Finder pattern customization

const svgString = await getSVG("I love QR", {
    finderOuterShape: "drop",
    finderInnerShape: "circle",
    finderColor: "#ff0000",
    borderRadius: 2,
    cornerMode: "merge",
});

React

import { QR } from "qreator/lib/react";

function App() {
    return <QR text="https://example.com" labelText="SCAN ME" labelStyle="pill" />;
}

More examples

Syntax

• getPNG(text, [options]): Readable stream with image data.
• getSVG(text, [options]): Readable stream with image data.
• getPDF(text, [options]): Readable stream with image data.

Options

• text: text to encode
• options: additional image options object

Additional Options

Name	Description	Type	Possible Values	Default
ec_level	error correction level	string	L, M, Q, H	M
type	image type	string	png, svg, pdf	png
size	png and svg only size of one module in pixels	number	0 - n	5 (png) 0 (others)
margin	white space around QR image in modules	number	0 - n	4 (png) 1 (others)
parse_url	EXPERIMENTAL try to optimize QR-code for URLs	boolean	true, false	false
logo	buffer with png/jpeg image	ArrayBuffer	-	undefined
logoWidth	height of logo in percent	number	0 - 100	20
logoHeight	width of logo in percent	number	0 - 100	20
color	module color in rgba or hex format	number	#000000 - #000000	#000000 (black with 100% opacity)
bgColor	background color in rgba or hex format	number	#000000 - #FFFFFF	#FFFFFF (white with 100% opacity)
borderRadius	border-radius (in pixels)	number	0 - size / 2	0
cornerMode	how corners are rendered when borderRadius > 0	string	individual, merge	individual
finderOuterShape	shape of the outer ring of finder patterns	string	square, rounded, circle, drop	undefined
finderInnerShape	shape of the inner dot of finder patterns	string	square, rounded, circle, drop	undefined
finderColor	color of finder patterns (overrides color)	number/string	same as color	undefined
noExcavate	don't remove partially covered modules	boolean	true, false	false
labelText	text label to display below QR	string	-	undefined
labelStyle	label presentation style	string	below, pill, box	below
labelColor	label text color	number/string	same as color	color (below) / bgColor (pill/box)
labelBgColor	label background color (pill/box only)	number/string	same as color	same as color
labelFontSize	font size as multiple of module size	number	1 - n	5
labelFontFamily	font family	string	-	sans-serif

Benchmarks

getPNG x 148 ops/sec ±1.28% (61 runs sampled)
getPDF x 494 ops/sec ±2.59% (73 runs sampled)
getSVG x 1,977 ops/sec ±1.94% (81 runs sampled)
getPNG with logo x 84.19 ops/sec ±1.43% (53 runs sampled)
getPDF with logo x 43.27 ops/sec ±6.82% (60 runs sampled)
getSVG with logo x 1,885 ops/sec ±0.35% (89 runs sampled)