@qrcode-js/core
Advanced tools
An awesome but simple QR code generator written in JavaScript.
Most of the work is based on the work by @SumiMakito
TODO
This project is divided in three projects.
The "core" project is a platform-agnostic implementation to draw a QR on a canvas
The "node" project is a wrapper around the "core" project using "node-canvas" as backend
The "browser" project is a wrapper around the "core" project using the buil'in canvas in the browsers
Please install one of "node" or "browser" package
Do not install the "core" package unless you know what you0re doing
Options is an object that you can pass to the generator to customize your QR code.
type Options = {
text: string;
size?: number;
margin?: number;
correctLevel?: number;
maskPattern?: number;
version?: number;
components?: ComponentOptions;
colorDark?: string;
colorLight?: string;
autoColor?: boolean;
backgroundImage?: string | Buffer;
backgroundDimming?: string;
gifBackground?: ArrayBuffer;
whiteMargin?: boolean;
logoImage?: string | Buffer;
logoScale?: number;
logoMargin?: number;
logoCornerRadius?: number;
};
Type string
Text to be encoded in the QR code.
Type number?
Default 400
Size of the QR code in pixel.
Type number?
Default 20
Size of margins around the QR code body in pixel.
Type number?
Default QRErrorCorrectLevel.M ~> 0
For more information, please refer to Error correction feature | QRcode.com | DENSO WAVE.
Error correction level of the QR code.
Type number?
This is an advanced option.
Leave untouched to let the code decide which mask pattern to use.
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 Wikipedia File:QR_Code_Mask_Patterns.svg
For more information, please refer to Reed–Solomon codes for coders: Masking.
Type number?
This is an advanced option.
Leave untouched to let the code decide which version to use.
Specify the version to be used in QR code encoding.
Accepts an integer in range [1, 40].
⚠️ An error might occurs if the specified version does not have enough space for the input data.
For more information, please refer to Information capacity and versions of QR Code | QRcode.com | DENSO WAVE.
Type ComponentOptions
Controls the appearances of parts in the QR code.
Read section ComponentOptions to learn more.
Type string?, CSS <color>
Default "#000000"
For more information about CSS <color>, please refer to <color> - CSS: Cascading Style Sheets | MDN
Color of the blocks on the QR code.
Type string?, CSS <color>
Default "#ffffff"
Color of the empty areas on the QR code.
Type boolean?
Default true
Automatically calculate the colorDark value from the QR code's background.
Type (string|Buffer)?
Default undefined
Background image to be used in the QR code.
Accepts a data: string in web browsers or a Buffer in Node.js.
Type string?, CSS <color>
Default "rgba(0, 0, 0, 0)"
Color of the dimming mask above the background image.
Type boolean?
Default true
Use a white margin instead of a transparent one which reveals the background of the QR code on margins.
Type (string|Buffer)?
Default undefined
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?
Default 0.2
Ratio of the logo size to the QR code size.
Type number?
Default 6
Size of margins around the logo image in pixels.
Type number?
Default 0
Ratio of the logo corner radius. 0 means no round. 1 means max round
Type (ctx: CanvasRenderingContext2D, size: number) => CanvasGradient?
Custom function to create a gradient as a foreground color (data blocks and finders). Inside the body you must create a gradient with the provided context, add stop colors and return it. Below is an example.
new AwesomeQR({
gradient: (ctx: CanvasRenderingContext2D, size: number) => {
// This creates a horizontal gradient from left to right
const gradient = ctx.createLinearGradient(0, 0, size, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");
return gradient;
},
});
Type "telegram" | (( canvasContext: CanvasRenderingContext2D, 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)
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 ( type: string, canvasContext: CanvasRenderingContext2D, parameters: object ) => undefined
Special function called in certain points when drawing the QR onto the canvas. Might be useful if you have to manipulate the canvas manually. Actually it's called before data is drawed and before the background is applied to the entire canvas
ComponentOptions controls the appearances of parts in the QR code.
type ComponentOptions = {
data?: {
scale?: number;
round?: number;
};
finder?: {
round?: number;
};
};
// default ComponentOptions
{
data: {
scale: 1,
round: 0,
},
finder: {
round: 0,
}
}
Type number?
Scale factor for blocks in the specified area of the QR code.
Type number?
Ratio of rounded corner for finders or data blocks. 0 means no round. 1 means max round (a circle)
qrcode-js code is licensed under MIT License.
Copyright (c) 2017-2020 Makito
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
jquery-qrcode
Copyright (c) 2011 Jerome Etienne, http://jetienne.com
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
QRCode for JavaScript
Copyright (c) 2009 Kazuhiko Arase
URL: http://www.d-project.com/
Licensed under the MIT license:
http://www.opensource.org/licenses/mit-license.php
The word "QR Code" is registered trademark of
DENSO WAVE INCORPORATED
http://www.denso-wave.com/qrcode/faqpatent-e.html
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 not healthy version release cadence and project activity because the last version was released 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
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.