npm i qrcode-styled
This library is based on node-qrcode with different options aiming to modify the QR codes's style.
Please see the docs of node-qrcode for QR code related options (like mask pattern, QR code version etc.). The options described here only reference styling paremeters.
toDataURL()
: <Promise>payload
: <string>.options
: {}. See Styling.cb()
: Callback function.
There are two styling dimensions for modules:
type
: Modifies shape of modulescolordark
andcolorlight
: Modify color of modules.colordark
refers to the module colorcolorlight
to the background.
const opts = {
moduleStyle: {
type: 'square',
colordark: '#0D406C',
colorlight: '#ffffff'
},
}
type
: <string>. Possible values:'square'
,'rounded'
. Default:'square'
colordark
: <string>. Possible values: Hexadecimal color codes. Default:'#000000'
Module colorcolorlight
: <string>. Possible values: Hexadecimal color codes. Default:'#ffffff'
Background color
Note: If you don't choose white as background, or background and module color only differ slightly, please test the QR code for usability.
const opts = {
moduleStyle: {},
positionMarker: {
squareType: 'none',
squareColor: '#7826E1',
innerType: 'square',
innerColor: '#19DE7F'
},
}
squareType
: <string>. Possible values:'none'
,'square'
. Default:'none'
Type of the outer position marker frameinnerType
: <string>. Possible values:'none'
,'square'
. Default:'none'
Type of the inner area of the position markersquareColor
,innerColor
: <string>. Possible values:'none'
,'square'
. Default:'none'
Note: If moduleStyle.type = 'square'
there will be no difference between positionMarker.squareType = 'none'
and positionMarker.squareType = 'square'
. The same holds for positionMarker.innerType
option.
const opts = {
moduleStyle: {},
positionMarker: {},
image: 'src/assets/image.svg',
}
-
With the image key, provide a path starting with the directory on the
nodes_modules
level where you placed the image you want to insert into the QR code's center. -
You have to provide the file format suffix. You can provide the file in the following formats:
Image format .svg
See node-qrcode. All options are supported except the color
option, because this parameter refers to styling. You can style color of modules and position markers separately (see Modules)
import { toDataURL } from 'qrcode-styled';
export class AppController {
@Get()
createQRCode(@Res() res: any): any {
const payload = 'text_hidden_behind_fuzzy_colored_schema'
const opts = {
moduleStyle: {
type: 'square',
colordark: '#0D406C',
colorlight: '#ffffff'
},
positionMarker: {
squareType: 'none',
squareColor: '#7826E1',
innerType: 'square',
innerColor: '#19DE7F'
},
}
toDataURL(payload, opts).then((resp) => {
res.send(`<html lang="en">
<head>
<style type="text/css">
.container {
background-color: aqua;
}
</style>
</head>
<body class="container">
<style>
.qr-code {
background-color: white;
height: 40rem;
width: 40rem;
text-align: center;
background-image: url('${resp}');
background-repeat: no-repeat;
}
</style>
<div class="qr-code"> </div>
</body>
</html>`)
})
}
}
Upcoming features:
- provide more image formats
positionMarker.squareType = 'rounded'
positionMarker.innerType = 'dot'
moduleStyle.type = 'star'
- Add output types as provided in node-qrcode
This project is not yet suitable for integration. Not typed.