Options

content required

• Type: string

QR Code content.

width

• Type: number

• Default: 380

QR Code canvas width.

TIP

If you feel that QRCode not sharp and not clear enough, you can set the width to larger and it looks better!

canvas

• Type: HTMLCanvasElement

• Default: a new canvas tag

A canvas tag to show the QR code.

TIP

It is better to use image but not canvas if you don't need drawing after creating qrcode.

Canvas may appear white and flashing!

image

• Type: HTMLImageElement

• Default: a new img tag

A img tag to show the QR code.

download

• Type: boolean | (download: () => Promise<void>) => void

• Default: false

You can set the value to be true to download the file immediately.

if download is a funciton, you can use it like:

new QrCodeWithLogo({
  content: 'https://github.com/zxpsuper',
  logo: {
    src: 'https://avatars1.githubusercontent.com/u/28730619?s=460&v=4'
  },
  download(downloadFn) {
    // you can choose when to start download by downloadFn...
    downloadFn().then(() => {
      // do what you want to do after download image!
    })
  }
})

downloadName

• Type: string

• Default: qr-code.png

Set the download file name, should be used with the download property.

onError

• Type: (err) => void

• Default: null

Catch error and handle it!

nodeQrCodeOptions

• Type: object

nodeQrCodeOptions.margin

• Type: number
• Default: 4

qrcode margin

nodeQrCodeOptions.errorCorrectionLevel

• Type: string
• Default: according to content length and auto choose.

qrcode errorCorrectionLevel, such as "L", "M", "Q", "H"

nodeQrCodeOptions.color

• Type object

qrcode color

TIP

All color fields automatically prepend # to hex values if missing. For example, ff0000 is treated as #ff0000. Non-hex strings like rgb(...) or named colors are left unchanged.

nodeQrCodeOptions.color.dark

• Type: string
• Default: #000000

qrcode color value of dark (qrcode foreground color)

nodeQrCodeOptions.color.light

• Type: string
• Default: #ffffff

qrcode color value of light (qrcode background color)

TIP

If you want a transparent background, please set light equal to '#00000000'

logo

• Type: object | string

logo.src required

• Type: string

logo.logoRadius

• Type: number
• Default: 0

logo.logoSize

• Deprecated

It can auto calculate logoSize now!

logo.borderSize

• Deprecated

WARNING

You are recommended to use borderWidth instead of borderSize!

logo.borderWidth

• Type: number
• Default: 10

logo.borderRadius

• Type: number
• Default: 8

logo.bgColor

• Type: String
• Default: #ffffff

It is the logo background color

logo.crossOrigin

• Type: string
• Default: Anonymous

logo.width

• Type: number

Width of the logo image. Required when using SVG renderer with a base64 data URL logo in Node.js environment.

logo.height

• Type: number

Height of the logo image. Required when using SVG renderer with a base64 data URL logo in Node.js environment.

renderer

• Type: "canvas" | "svg"
• Default: canvas

Choose the rendering method. When set to svg, the library generates an SVG string instead of drawing on a canvas.

TIP

SVG output is useful when you need:

• Scalable QR codes that look crisp at any size
• Vector graphics for print or design workflows
• Direct SVG string output for embedding in HTML

WARNING

Node.js Compatibility:

Bundle	Browser	Node.js
CJS (common.js)	✅	✅
UMD (min.js)	✅	✅
ESM (esm.js)	✅	❌

Node.js usage:

• Canvas renderer: ❌ Not supported (requires browser APIs)
• SVG renderer (no logo): ✅ Fully supported
• SVG renderer + base64 logo: ✅ Supported (provide width and height)
• SVG renderer + URL logo: ❌ Not supported (requires new Image())

// Node.js example with SVG + base64 logo
const QrCodeWithLogo = require('qrcode-with-logos');

const qr = new QrCodeWithLogo({
  content: 'https://example.com',
  renderer: 'svg',
  logo: {
    src: 'data:image/png;base64,iVBORw0KGgo...', // base64 data URL
    width: 100,  // required for base64 logos in Node.js
    height: 100, // required for base64 logos in Node.js
  }
});

const svgString = await qr.getSvgString();

dotsOptions

• Type: Object

dotsOptions.type

• Type: "dot" | "dot-small" | "tile" | "rounded" | "square" | "diamond" | "star" | "fluid" | "fluid-line" | "stripe" | "stripe-row" | "stripe-column"
• Default: square

dotsOptions.color

• Type: string
• Default: #000000

cornersOptions

• Type: object

cornersOptions.type

• Type: "square" | "rounded" | "circle" | "rounded-circle" | "circle-rounded" | "circle-star" | "circle-diamond"

• Default: square

cornersOptions.color

• Type: string
• Default: #000000

cornersOptions.radius

• Type: object | number

It is the corners rounded radius. It is Effective when cornersOptions.type includes 'rounded'.

cornersOptions.radius.inner

• Type: number
• Default: dotSize / 4

cornersOptions.radius.outer

• Type: number
• Default: dotSize / 2