QR Code Styling

Three modes are supported:

1. Center – Logo placed in the middle (recommended)
2. Overlay – Image drawn on top of the QR
3. Background – Image as background

const options = {
    image: 'https://example.com/logo.png',
    imageOptions: {
        mode: 'center',             // "center" | "overlay" | "background"
        imageSize: 0.9,             // 0.0 .. 1.0 (relative to available space based on error correction level)
        margin: 1,
        crossOrigin: 'anonymous'
    }
}

Tip: overlay mode works best if your logo has transparent background and an outline matching the background colour.

Background mode

In background mode, a translucent fill colour or gradient is used to draw the light parts of the QR code.

const options = {
    imageOptions: {
        mode: 'background',
        crossOrigin: 'anonymous',
        fill: {
            color: 'rgba(255,255,255,0.75)'
        }
    }
}

Tip: higher error correction level allows for larger images/logos.