![](\"https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/facebook.png\")
\r\n![](\"https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/qr-styling.png\")
\r\n![](\"https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/telegram.png\")
\r\n\r\n\r\n\r\n\r\n
![](\"https://raw.githubusercontent.com/Liquid-JS/qr-code-styling/master/src/assets/border.png\")
\r\n\r\nVersion `5.0.0` of the library introduces plugin support to replace the now-deprecated `QRCodeStyling.extension`, with the ability to customize the shape of dots and corners. Existing extensions can still be applied as `plugins: [{ postProcess: extensionFn }]`.\r\n\r\nWhile the old API only supports a single extension, it is now possible to apply multiple plugins or even multiple instances of a single plugin. For example, to create a QR code with a complex border:\r\n\r\n```ts\r\nimport BorderPlugin from '@liquid-js/qr-code-styling/border-plugin'\r\nimport FontFacesPlugin from '@liquid-js/qr-code-styling/font-faces-plugin'\r\n\r\nconst qrCode = new QRCodeStyling({\r\n plugins: [\r\n new BorderPlugin({\r\n round: 1,\r\n size: 2,\r\n color: '#20c9dc'\r\n }),\r\n new BorderPlugin({\r\n round: 1,\r\n size: 60,\r\n color: '#4267b2',\r\n text: {\r\n font: 'sans-serif',\r\n color: '#e9ebee',\r\n size: 30,\r\n top: {\r\n content: 'Scan the'.toUpperCase()\r\n },\r\n bottom: {\r\n content: 'QR code'.toUpperCase()\r\n }\r\n }\r\n }),\r\n /**\r\n * Embed fonts used with BorderPlugin\r\n * \r\n * Not needed when using standard or local fonts, but recommended for portability and consistency; use\r\n * subsetting if possible to reduce the generated file size.\r\n */\r\n new FontFacesPlugin([{\r\n font: 'sans-serif',\r\n src: `url(data:font/otf;base64,d09GMgABAA...)`\r\n }])\r\n ]\r\n // ...other options\r\n})\r\n```\r\n\r\n#### Plugin development\r\n\r\nA simple plugin example to customize QR code dots:\r\n\r\n```ts\r\nimport { svgPath, DrawArgs } from '@liquid-js/qr-code-styling/plugin-utils'\r\n\r\nconst qrCode = new QRCodeStyling({\r\n plugins: [\r\n {\r\n drawDot: (args: DrawArgs): SVGElement | undefined => {\r\n const { size, x, y, document } = args\r\n\r\n const element = document.createElementNS('http://www.w3.org/2000/svg', 'path') \r\n // Insert your own SVG path definition, or implement neighbour-aware logic through args.getNeighbor()\r\n element.setAttribute(\r\n 'd',\r\n svgPath`M ${x} ${y + (size - size) / 2}\r\n v ${size}\r\n h ${size / 2}\r\n a ${size / 2} ${size / 2} 0 0 0 0 ${-size}\r\n z`\r\n )\r\n\r\n return element\r\n }\r\n },\r\n ]\r\n // ...other options\r\n})\r\n```\r\n\r\nSee [Border plugin](https://github.com/Liquid-JS/qr-code-styling/blob/master/src/plugins/border.ts) and [figures](https://github.com/Liquid-JS/qr-code-styling/tree/master/src/figures) for further reference.\r\n\r\n### Node\r\n\r\n> ⚠️ **Note**: make sure to install peer dependencies when running on Node (not needed for browser environments)\r\n>\r\n> npm install @liquid-js/qrcode-generator @xmldom/xmldom file-type sharp\r\n\r\n```js\r\nimport { QRCodeStyling } from '@liquid-js/qr-code-styling'\r\nimport { writeFile } from 'fs/promises'\r\nimport PDFDocument from 'pdfkit'\r\nimport SVGtoPDF from 'svg-to-pdfkit'\r\n\r\nconst qrCode = new QRCodeStyling({\r\n data: 'https://www.facebook.com/',\r\n image: 'https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg',\r\n dotsOptions: {\r\n color: '#4267b2',\r\n type: 'rounded',\r\n size: 10\r\n },\r\n backgroundOptions: {\r\n color: '#e9ebee',\r\n margin: 1\r\n },\r\n imageOptions: {\r\n crossOrigin: 'anonymous',\r\n margin: 1,\r\n imageSize: 0.5\r\n }\r\n})\r\n\r\nconst svgCode = await qrCode.serialize()\r\n\r\nconst { width, height } = qrCode.size\r\nconst buffers = []\r\nconst doc = new PDFDocument({ size: [width, height] })\r\ndoc.on('data', (v) => buffers.push(v))\r\nconst buffer = await new Promise((resolve) => {\r\n doc.on('end', () => {\r\n resolve(Buffer.concat(buffers))\r\n })\r\n SVGtoPDF(doc, svgCode, 0, 0, {\r\n width,\r\n height,\r\n assumePt: true\r\n })\r\n doc.end()\r\n})\r\nawait writeFile('qr.pdf', buffer)\r\n```\r\n\r\n### Kanji support\r\n\r\nFor Kanji mode to work, import `stringToBytesFuncs` from `@liquid-js/qr-code-styling/kanji` and inclue it with config.\r\n\r\n```js\r\nimport { stringToBytesFuncs } from '@liquid-js/qr-code-styling/kanji'\r\n\r\nconst qrCode = new QRCodeStyling({\r\n data: '漢字',\r\n qrOptions: {\r\n mode: Mode.kanji\r\n },\r\n stringToBytesFuncs\r\n // ...other options\r\n})\r\n```\r\n\r\n## License\r\n\r\n[MIT License](https://github.com/Liquid-JS/qr-code-styling/blob/master/LICENSE)\r\n","readmeFilename":"README.md"}