@qrcode-js/core
Advanced tools
Readme
This is the core package. It draws effectively the QR based on options provived. It is platform agnostic and works both in browsers and server environment thanks to the wrappers.
We have extended the API to provide lots of customization, for example with the custom function drawFunction and onEvent.
Basically they provide a method to take "control" of the canvas. More on them in the API section
Basically the wrappers ensure that the core has all stuff to work with. For example in browsers canvas is provided by default and ready to use. On Node doesn't exist this implementation and so we have to use an external package (canvas).
There are no examples provided as this package alone doesn't make mush sense. If you're looking for examples, check out the wrappers (Node and Browser).
type ColorStop = {
color: string;
stop: number;
};
type LinearGradientDirections = "to-right" | "to-bottom";
type RadialGradient = {
colorStops: ColorStop[];
type: "round";
};
type LinearGradient = {
colorStops: ColorStop[];
direction: LinearGradientDirections;
type: "linear";
};
type Options = {
text: string;
background?: {
colorAbove?: string;
colorBelow?: string;
image?: Union;
};
color?: string;
dots?: {
round?: number;
scale?: number;
};
drawFunction?: Union;
finder?: {
round?: number;
};
gradient?: Union;
logo?: {
image: Union;
margin?: number;
round?: number;
scale?: number;
};
margin?: {
color?: string;
size?: number;
};
onEvent?: Function;
qr?: {
correctLevel?: number;
maskPattern?: number;
version?: number;
};
size?: number;
};
type EventTypes =
| "start-foreground"
| "gradient"
| "end-foreground"
| "start-background"
| "end-background"
| "final-canvas";
Type string
Required
Text to be encoded in the QR code.
Type Object
Background options
Type string
defaultValue "rgba(0, 0, 0, 0)"
Color of the dimming mask above the background image.
Accepts a CSS <color>.
For more information about CSS <color>, please refer to https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
Type string
defaultValue "transparent"
Color of the background of the QR.
Goes behind an eventually image with background.image option
Type string | Buffer
Background image to be used in the QR code.
Accepts a data: string in web browsers or a Buffer in Node.js.
Type string
defaultValue "#000000"
Color of the blocks on the QR code.
Accepts a CSS <color>.
For more information about CSS <color>, please refer to https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
Type Object
Options for data/ECC dots.
Type number
range 0..1
default 0
Percentage to round the dots (after scaling) in the QR
Type number
range 0..1
default 1
Scale factor for all dots.
Type "telegram" | (( canvasContext: any, left: number, top: number, nSize: number, scale: number, round: number, parameters: { isTiming: boolean; isAlignment: boolean; }, otherCells: { top: boolean; left: boolean; right: boolean; bottom: boolean; }, ) => undefined)
Custom function to draw a custom shape as a dot in the QR.
Accepts either a string or a custom function. As a string it currently accepts only "telegram" mode. As a function here are the parameters:
Type Object
Options for finder squares.
Type number
range 0..1
default 0
Percentage to round the three finder in the QR
Type ((ctx: any, size: number) => any) | LinearGradient | RadialGradient
Function for creating a gradient as foreground color
Can be of three types:
Overrides colorDark option
Type Object
Logo options
Type string | Buffer
Required
Logo image to be displayed at the center of the QR code.
Accepts a data: string in web browsers or a Buffer in Node.js.
When set to undefined or null, the logo is disabled.
Type number
defaultValue 10
Size of margins around the logo image in pixels.
Type number
range 0..1
defaultValue 0.4
Corner radius of the logo image in pixels.
Type number
defaultValue 0.2
Ratio of the logo size to the QR code size.
Type Object
Margin options
Type string
defaultValue "transparent"
Color of the margins.
Accepts a CSS <color>.
For more information about CSS <color>, please refer to https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
Type number
defaultValue 20
Size of margins around the QR code body in pixel.
Type (type: EventTypes, canvasContext: any, parameters?: object) => void
Custom function called at certain phases of drawing the QR. Useful for customizing the canvas if something is not supported by this library Actually called when:
Type Object
QR options
Type number
defaultValue 0
Error correction level of the QR code.
Accepts a value provided by QRErrorCorrectLevel.
For more information, please refer to https://www.qrcode.com/en/about/error_correction.html.
Type number
This is an advanced option.
Specify the mask pattern to be used in QR code encoding.
Accepts a value provided by QRMaskPattern.
To find out all eight mask patterns, please refer to https://en.wikipedia.org/wiki/File:QR_Code_Mask_Patterns.svg
For more information, please refer to https://en.wikiversity.org/wiki/Reed%E2%80%93Solomon_codes_for_coders#Masking.
Type number
This is an advanced option.
Specify the version to be used in QR code encoding.
Accepts an integer in range [1, 40].
For more information, please refer to https://www.qrcode.com/en/about/version.html.
Type number
defaultValue 400
Size of the QR code in pixel.
FAQs
An awesome but simple QR code generator written in JavaScript.
The npm package @qrcode-js/core receives a total of 0 weekly downloads. As such, @qrcode-js/core popularity was classified as not popular.
We found that @qrcode-js/core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.