qrcode-with-logos
Introduction
QRcode-with-logos is a tool for creating a QRcode with a logo in your object.
It depend on qrcode
dependence and be more powerful than qrcode
.
It can create a canvas or a image for the QRcode and even you can use the method to download the file you want.
Usage
- Install the module
npm install qrcode-with-logos --save
Options
content
(required)
Type: String
QR Code content.
width
Type: Number
Default: 0
QR Code width.
canvas
Type: DomElement
Default: a new canvas tag
A canvas tag to show the QR code.
image
Type: DomElement
Default: a new img tag
A img tag to show the QR code.
download
Type: Boolean
Default: false
You can set the value to be true to download the file immediately, the premise is that you have use the toImage()
methods.
Examplate
canvas: document content: "https://github.com/zxpsuper" width: 380 download: true image: document logo: src: "https://avatars1.githubusercontent.com/u/28730619?s=460&v=4" ;
downloadName
Type: String
Default: qr-code.png
Set the download file name, should be used with the download
property.
nodeQrCodeOptions
Type: Object
nodeQrCodeOptions.margin
:
Type Number
-- qrcode margin
nodeQrCodeOptions.errorCorrectionLevel
:
Type String
-- qrcode errorCorrectionLevel, such as "M", "Q", "H"
nodeQrCodeOptions.scale
:
Type Number
-- qrcode scale
nodeQrCodeOptions.color
:
Type Object
-- qrcode color
nodeQrCodeOptions.color.dark
:
Type String
-- qrcode color value of dark
nodeQrCodeOptions.color.light
:
Type String
-- qrcode color value of light
logo
Type: Object
logo.src
(required):
Type String
-- logo url or logo module
logo.logoRadius
:
Type Number
-- Default: 0
logo.logoSize
:
Type Number
-- Default: 0.15
, is the scale to qrcode
logo.borderRadius
:
Type Number
-- Default: 8
logo.borderColor
:
Type String
-- Default: "#ffffff"
logo.borderSize
:
Type Number
-- Default: 0.05
, is the scale to qrcode
logo.bgColor
:
Type String
-- Default: "#ffffff"
, the logo background color
logo.crossOrigin
:
Type String
-- Default: "Anonymous"
Methods
toCanvas()
———— Return Promise
, show the qrcode by canvas tag
canvas: document content: "https://github.com/zxpsuper" width: 380 // download: true, image: document logo: src: "https://avatars1.githubusercontent.com/u/28730619?s=460&v=4" ;
toImage()
———— Return Promise
, show the qrcode by img tag
canvas: document content: "https://github.com/zxpsuper" width: 380 // download: true, image: document logo: src: "https://avatars1.githubusercontent.com/u/28730619?s=460&v=4" ;
downloadImage(name: string)
———— Return Promise
, set the filename and download the image, should be use after toImage()
method.
let qrcode = canvas: document content: "https://github.com/zxpsuper" width: 380 // download: true, image: document logo: src: "https://avatars1.githubusercontent.com/u/28730619?s=460&v=4" ; qrcode;
getCanvas()
———— Return Promise<HTMLCanvasElement>
, you can use the HTMLCanvasElement to do more things with canvas.
let qrcode = canvas: document content: "https://github.com/zxpsuper" width: 380 // download: true, image: document logo: src: "https://avatars1.githubusercontent.com/u/28730619?s=460&v=4" ; qrcode;
Example
;let qrcode = canvas: document content: "https://github.com/zxpsuper" width: 380 // download: true, image: document logo: src: "https://avatars1.githubusercontent.com/u/28730619?s=460&v=4" ; qrcode;
Ecosystem
Project | Status | Description |
---|---|---|
qrcode | QR code/2d barcode generator. |
Questions or advise
If you have some question or advise, you can send me a E-mail(zxpscau@163.com).