{"_id":"@solana/qr-code-styling","_rev":"30-bf26d98fdb81f6cd9847731605718419","name":"@solana/qr-code-styling","dist-tags":{"latest":"1.6.0"},"versions":{"1.6.0-rc.1":{"name":"@solana/qr-code-styling","version":"1.6.0-rc.1","keywords":["qr","qrcode","qr-code","js","qrjs","qrstyling","styling","qrbranding","branding","qrimage","image","qrlogo","logo","design"],"author":{"name":"Denys Kozak","email":"kozak.denys.dev@gmail.com"},"license":"MIT","_id":"@solana/qr-code-styling@1.6.0-rc.1","maintainers":[{"name":"sebastianbor","email":"sebastian_bor@hotmail.com"},{"name":"seanyoung","email":"sean@mess.org"},{"name":"mvines","email":"mvines@gmail.com"},{"name":"jstarry","email":"Justin.m.starry@gmail.com"},{"name":"danpaul000","email":"dan@solana.com"},{"name":"jack-solana","email":"jack@solana.com"},{"name":"tyera","email":"tyera@solana.com"},{"name":"joncinque","email":"me@jonc.dev"},{"name":"bartosz-lipinski","email":"bartosz@solana.com"},{"name":"ryoqun","email":"ryoqun@gmail.com"},{"name":"trent-solana","email":"trent@solana.com"},{"name":"jordansexton","email":"jordan@jordansexton.com"}],"homepage":"https://qr-code-styling.com","bugs":{"url":"https://github.com/kozakdenys/qr-code-styling/issues"},"dist":{"shasum":"bcf6803851fed620deefe48e844c8b7f463cfdd3","tarball":"https://registry.npmjs.org/@solana/qr-code-styling/-/qr-code-styling-1.6.0-rc.1.tgz","fileCount":29,"integrity":"sha512-pbfrAC3JgeJB2ka9Dk5oowWkhUp1F9qI47X5ICx1sFOQ1opz2lo0EVS1G8XquwNlWQkbdOqzTp4bG47BxPZ0QA==","signatures":[{"sig":"MEUCIE04dWZN4sqAJsapfK/2N2tTUB+CBcYB+8rYMmCb9H+dAiEAvqahgoW7FEgt5RpX/rkzX8O3FiF1cgL2/DsJVp3p/xM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":263203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+aGTCRA9TVsSAnZWagAAmaMQAIz0m7P+51Yt1OvpjGt3\nsbfYVoPImYs2twuum6MUvVFHG0+1oDVkHALsPjmtkevqibU2CHHnPNmbvndW\nxH+WayTUQNZrkWJC7iq5s5zBXhhYePqss+8GMzAuIYGBH+8Aknu8RzWV3HGH\nUacxg+wJaURWY68yIVEsjMhV0baMttULTpnTp88QsuhqyZTL/W7vo1ZABMuF\nnW+3Uh6p+pUEtmzRP9EgcU+nKmwTpt/PfoWN6UP8oi6b2re1No/DjlUJSsYG\nNPJ6a8+cFsS6B7ckDH9TtsHUr/R5bLHrZFpqhXTOx/1g4K7hXFQozzDNGfg1\nQaA7v4V1ZJwZEHYEIp7Bshx3FqgMyeX2I7g0BU4zWAW2TE2NRTygAPNsoekc\nCxGxzmyVIuoVz5CXPLKhkqyn4jKemDoYirwAiCFnnkLzk/cIieLNdQOL9WNy\nKzhuciZD9lw4IBAeX/WKUNm58Qxbhrdx5p42P9TCUrzmiQBgSJIzo1c311/9\nf+6JfI9gIABKS798RulNLykbDYVEQDGkN321cKTViF+UOcxqO0Ew72iwLXUx\nV6pO7De++xN+AlsV8FpZi1t1wkPedLRxS6tvrXTxmQFi7TQ6b6aEfB8ERPmL\nsawyHFfKrGEyGEiH0dMO2P0Cd5ghy9/spfd9THy4iLQCRUcdm43dg1w4JnUL\nkZl+\r\n=vOjP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/qr-code-styling.js","types":"lib/index.d.ts","gitHead":"4c89dce2cd3622fc41965ad908db9060392ae6fd","scripts":{"test":"jest","build":"webpack --mode=production --config webpack.config.build.js","start":"webpack serve --open --config webpack.config.dev-server.js","build:dev":"webpack --mode=development --config webpack.config.build.js"},"_npmUser":{"name":"jordansexton","email":"jordan@jordansexton.com"},"repository":{"url":"git+https://github.com/kozakdenys/qr-code-styling.git","type":"git"},"_npmVersion":"8.3.1","description":"Add a style and an image to your QR code","directories":{},"_nodeVersion":"14.17.5","dependencies":{"qrcode-generator":"^1.4.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^26.6.3","canvas":"^2.8.0","eslint":"^7.17.0","ts-jest":"^26.4.4","webpack":"^5.12.3","prettier":"^2.2.1","ts-loader":"^8.0.14","typescript":"^4.1.3","webpack-cli":"^4.3.1","eslint-loader":"^4.0.2","webpack-merge":"^5.7.3","eslint-plugin-jest":"^24.1.3","webpack-dev-server":"^3.11.1","html-webpack-plugin":"^4.5.1","clean-webpack-plugin":"^3.0.0","eslint-config-prettier":"^7.1.0","eslint-plugin-prettier":"^3.3.1","@typescript-eslint/parser":"^4.13.0","jest-environment-jsdom-fifteen":"^1.0.0","@typescript-eslint/eslint-plugin":"^4.13.0"},"_npmOperationalInternal":{"tmp":"tmp/qr-code-styling_1.6.0-rc.1_1643749779785_0.8004065069154818","host":"s3://npm-registry-packages"}},"1.6.0-beta.0":{"name":"@solana/qr-code-styling","version":"1.6.0-beta.0","keywords":["qr","qrcode","qr-code","js","qrjs","qrstyling","styling","qrbranding","branding","qrimage","image","qrlogo","logo","design"],"author":{"name":"Denys Kozak","email":"kozak.denys.dev@gmail.com"},"license":"MIT","_id":"@solana/qr-code-styling@1.6.0-beta.0","maintainers":[{"name":"sebastianbor","email":"sebastian_bor@hotmail.com"},{"name":"seanyoung","email":"sean@mess.org"},{"name":"mvines","email":"mvines@gmail.com"},{"name":"jstarry","email":"Justin.m.starry@gmail.com"},{"name":"danpaul000","email":"dan@solana.com"},{"name":"jack-solana","email":"jack@solana.com"},{"name":"tyera","email":"tyera@solana.com"},{"name":"joncinque","email":"me@jonc.dev"},{"name":"bartosz-lipinski","email":"bartosz@solana.com"},{"name":"ryoqun","email":"ryoqun@gmail.com"},{"name":"trent-solana","email":"trent@solana.com"},{"name":"jordansexton","email":"jordan@jordansexton.com"}],"homepage":"https://qr-code-styling.com","bugs":{"url":"https://github.com/kozakdenys/qr-code-styling/issues"},"dist":{"shasum":"656e793756ddfe0f6ee62e8d6a45217ebe88ced1","tarball":"https://registry.npmjs.org/@solana/qr-code-styling/-/qr-code-styling-1.6.0-beta.0.tgz","fileCount":29,"integrity":"sha512-JYV016q+PeHdK6GGGFzqWSR7x35gFS6I1bYAQEQ60aApGE7+2OM3q4he3Nzg3Hdxl/frMnli6Z0bQ4Xm+i76Kg==","signatures":[{"sig":"MEQCIHF0Mb6xFZw/jEQgBLDyqbweiYi6AMvWo6qBzZQcBnVoAiAi7oCEzjJPiPHVYWWIoiZpwWZ1LdiUeewNZynlQ0mQ8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":262841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/dpsCRA9TVsSAnZWagAATwYQAKTpW0zPRCV00qQ1VcTP\n2kL7AV3b3QyQix+M4jU6/WN2wDwrDXxNfZVTWUU2P6zVzOlx4hMUXjDSuGS7\nn4XOPFKzXE/376a+sU6inUNLA0ar6DzdAetW7ScnuJuhXkb/P02HOx6atW5e\ngJBjU4nGVs9TNLa9Unu/mmssDT1NNHDNunxMZR1qztSmUeCTMT15TXNtUYAe\nSMehoktDZN0psBeyLxj4tCbFx9b5M4uXYhI/xEjzhvvM+yDgVlx+RsjUebkR\n9roVw380PlzNRiPdrzAchEmzf8kpyjD/wa9aktIiG5GyqoqYrDC39y/wjaLW\nG6LocHTLf3S13J4s+TIowSajiZgVanB3mGxEOshMDtZX8Ir7YcTASfxYiKuI\nI6eo1uM6lEyFhJr76ShXhwhtJg+wTKHky3hA6j9l0MGeJPb9x4wrHPR4MWp1\nx2Qq/9Q2tBsmYWtSA3e9ZgQRtYFgQxlqfFIdW2VmKZUulZmpFm2TZpgIJa3f\nNpTr+GNKoScW3lj3GRFEqnG+3Tf9RARAjSJlsP5wP2riIJxX+BPhuISuonG7\nBl31oQEYg2ZZnN3SURKA0lcIOMh4YEhoLuvbDCtxEO0BOQEBjFvo0x91tdTi\n+xHjRuV7taTvrEZBpqvi4CXD6ruJfNmEC7hFWTiSfeXMFt+FpyTehktZnl+w\notl/\r\n=zjr7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/qr-code-styling.js","types":"lib/index.d.ts","gitHead":"72496768d9d4950d448b6f315053fd888401921c","scripts":{"test":"jest","build":"webpack --mode=production --config webpack.config.build.js","start":"webpack serve --open --config webpack.config.dev-server.js","build:dev":"webpack --mode=development --config webpack.config.build.js"},"_npmUser":{"name":"jordansexton","email":"jordan@jordansexton.com"},"repository":{"url":"git+https://github.com/kozakdenys/qr-code-styling.git","type":"git"},"_npmVersion":"6.14.14","description":"Add a style and an image to your QR code","directories":{},"_nodeVersion":"14.17.5","dependencies":{"qrcode-generator":"^1.4.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^26.6.3","canvas":"^2.8.0","eslint":"^7.17.0","ts-jest":"^26.4.4","webpack":"^5.12.3","prettier":"^2.2.1","ts-loader":"^8.0.14","typescript":"^4.1.3","webpack-cli":"^4.3.1","eslint-loader":"^4.0.2","webpack-merge":"^5.7.3","eslint-plugin-jest":"^24.1.3","webpack-dev-server":"^3.11.1","html-webpack-plugin":"^4.5.1","clean-webpack-plugin":"^3.0.0","eslint-config-prettier":"^7.1.0","eslint-plugin-prettier":"^3.3.1","@typescript-eslint/parser":"^4.13.0","jest-environment-jsdom-fifteen":"^1.0.0","@typescript-eslint/eslint-plugin":"^4.13.0"},"_npmOperationalInternal":{"tmp":"tmp/qr-code-styling_1.6.0-beta.0_1644026476220_0.21257652742663735","host":"s3://npm-registry-packages"}},"1.6.0":{"name":"@solana/qr-code-styling","version":"1.6.0","keywords":["qr","qrcode","qr-code","js","qrjs","qrstyling","styling","qrbranding","branding","qrimage","image","qrlogo","logo","design"],"author":{"name":"Denys Kozak","email":"kozak.denys.dev@gmail.com"},"license":"MIT","_id":"@solana/qr-code-styling@1.6.0","maintainers":[{"name":"ngundotra","email":"noah@gundotra.org"},{"name":"_chido","email":"yihau.chen@solana.com"},{"name":"steveluscher","email":"me+npm@steveluscher.com"},{"name":"sebastianbor","email":"sebastian_bor@hotmail.com"},{"name":"seanyoung","email":"sean@mess.org"},{"name":"mvines","email":"mvines@gmail.com"},{"name":"jack-solana","email":"jack@solana.com"},{"name":"tyera","email":"tyera@solana.com"},{"name":"joncinque","email":"me@jonc.dev"},{"name":"bartosz-lipinski","email":"bartosz@solana.com"},{"name":"ryoqun","email":"ryoqun@gmail.com"},{"name":"trent-solana","email":"trent@solana.com"},{"name":"jordansexton","email":"jordan@jordansexton.com"}],"homepage":"https://qr-code-styling.com","bugs":{"url":"https://github.com/kozakdenys/qr-code-styling/issues"},"dist":{"shasum":"8693bae79ace4b81135e032ee0b60f1ad739c3ef","tarball":"https://registry.npmjs.org/@solana/qr-code-styling/-/qr-code-styling-1.6.0.tgz","fileCount":29,"integrity":"sha512-KyBmyFKPxQPhUkP0jjnxV2ZeF1R1guTD8Hrd0YvHvMnhtrNEoEEdv4Jpp4W0GN4qCGG2KYOM5d3TgoLD+CNf9Q==","signatures":[{"sig":"MEQCIHH0ggLoUC+I7bdhT30H4k/y6d2jp3gM4/1hVRIZXzP3AiAOnUhiXN+b7uKmehFx0DiAyfZ1FcU/RW3/dQVgK/nbeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":264102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCPMGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDsRAAn7Il//KqwMyIQNjJh4OPZlyZNc68hDGmXAw/3B/WAdijsMZ8\r\nbnf0CAXE9QV0+DRBKzNe2XBN4pBnIKo5BLThXkMt0kChNHv/BcmR/9PRA5VB\r\naSqXLTFUq0648Qr7+nJKgegJidNmRrNyzaImA6T5zqCs8RPe2mNxrM93xYx7\r\n3tCq3WX9PxDuMsoPPNVYnsOnaN3LnFyuR386rK1i8CdiA1bWgxTiYbe2jCgp\r\n5jFxJhew+gEDO69EZ0LKQh0sqp+sLYu7Qmqt00HffSrqCwGYWAEOGh1HUL+f\r\nqkajgiRXwhO9hlz/tgSWuReXdtd9taKBjzyht4AB3lxCIA/Zph3l31TdwGeh\r\nhKoyzei/p0SnQ1I4cv2SmfOT19ZbRiDivjjBTzAZeWe9/sd8ytOrbDRiXUpe\r\n1CSbAF9QuA6PythUq1X5d9RUm4NZ/C6w4A+90+8dSeTVLFdkYkIFBWsYEeXo\r\nPhfy1YxeFuyerc09oBwa/wB4l/dZP9PhxNIJwpSZTTQmQurZ26qaVUxoxNhG\r\noOOjial1Y9zuNy32tr9ucsp95U6Cxlt2IzXhcQapMMCtvz9bRWOG+ilZQNZW\r\nLT/jx47xwV69tGn6tI4O4KEm9J2F+3cjkL0osAApUIO1PM7wdFY1JxPzfuKx\r\nhp98JfehEe7pAMlLmF//xJ7IzIZyi6xZeO8=\r\n=fRDX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/qr-code-styling.js","types":"lib/index.d.ts","gitHead":"f85f7096f726804d75d00f023cb649465129f7bf","scripts":{"test":"jest","build":"webpack --mode=production --config webpack.config.build.js","start":"webpack serve --open --config webpack.config.dev-server.js","build:dev":"webpack --mode=development --config webpack.config.build.js"},"_npmUser":{"name":"jordansexton","email":"jordan@jordansexton.com"},"repository":{"url":"git+https://github.com/kozakdenys/qr-code-styling.git","type":"git"},"_npmVersion":"8.19.2","description":"Add a style and an image to your QR code","directories":{},"_nodeVersion":"16.18.0","dependencies":{"qrcode-generator":"^1.4.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^26.6.3","canvas":"^2.8.0","eslint":"^7.17.0","ts-jest":"^26.4.4","webpack":"^5.12.3","prettier":"^2.2.1","ts-loader":"^8.0.14","typescript":"^4.1.3","webpack-cli":"^4.3.1","eslint-loader":"^4.0.2","webpack-merge":"^5.7.3","eslint-plugin-jest":"^24.1.3","webpack-dev-server":"^3.11.1","html-webpack-plugin":"^4.5.1","clean-webpack-plugin":"^3.0.0","eslint-config-prettier":"^7.1.0","eslint-plugin-prettier":"^3.3.1","@typescript-eslint/parser":"^4.13.0","jest-environment-jsdom-fifteen":"^1.0.0","@typescript-eslint/eslint-plugin":"^4.13.0"},"_npmOperationalInternal":{"tmp":"tmp/qr-code-styling_1.6.0_1678308102222_0.13643303971345655","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-02-01T21:09:39.696Z","modified":"2025-06-02T16:10:52.521Z","1.6.0-rc.1":"2022-02-01T21:09:39.903Z","1.6.0-beta.0":"2022-02-05T02:01:16.568Z","1.6.0":"2023-03-08T20:41:42.522Z"},"bugs":{"url":"https://github.com/kozakdenys/qr-code-styling/issues"},"author":{"name":"Denys Kozak","email":"kozak.denys.dev@gmail.com"},"license":"MIT","homepage":"https://qr-code-styling.com","keywords":["qr","qrcode","qr-code","js","qrjs","qrstyling","styling","qrbranding","branding","qrimage","image","qrlogo","logo","design"],"repository":{"url":"git+https://github.com/kozakdenys/qr-code-styling.git","type":"git"},"description":"Add a style and an image to your QR code","maintainers":[{"email":"npm@solana.org","name":"solana-devs"}],"readme":"# QR Code Styling\n[![Version](https://img.shields.io/npm/v/qr-code-styling.svg)](https://www.npmjs.org/package/qr-code-styling)\n\nJavaScript library for generating QR codes with a logo and styling.\n\nTry it here https://qr-code-styling.com\n\nIf you have issues / suggestions / notes / questions, please open an issue or contact me. Let's create a cool library together.\n### Examples\n<p float=\"left\">\n<img style=\"display:inline-block\" src=\"https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/src/assets/facebook_example_new.png\" width=\"240\" />\n<img style=\"display:inline-block\" src=\"https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/src/assets/qr_code_example.png\" width=\"240\" />\n<img style=\"display:inline-block\" src=\"https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/src/assets/telegram_example_new.png\" width=\"240\" />\n</p>\n\n### Installation\n\n```\nnpm install qr-code-styling\n```\n\n### Usage\n\n```HTML\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>QR Code Styling</title>\n    <script type=\"text/javascript\" src=\"https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js\"></script>\n</head>\n<body>\n<div id=\"canvas\"></div>\n<script type=\"text/javascript\">\n\n    const qrCode = new QRCodeStyling({\n        width: 300,\n        height: 300,\n        type: \"svg\",\n        data: \"https://www.facebook.com/\",\n        image: \"https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg\",\n        dotsOptions: {\n            color: \"#4267b2\",\n            type: \"rounded\"\n        },\n        backgroundOptions: {\n            color: \"#e9ebee\",\n        },\n        imageOptions: {\n            crossOrigin: \"anonymous\",\n            margin: 20\n        }\n    });\n\n    qrCode.append(document.getElementById(\"canvas\"));\n    qrCode.download({ name: \"qr\", extension: \"svg\" });\n</script>\n</body>\n</html>\n```\n---\n\n[**React example (Codesandbox)**](https://codesandbox.io/s/qr-code-styling-react-example-l8rwl?file=/src/App.js)\n\n[**Angular example (Codesandbox)**](https://codesandbox.io/s/agitated-panini-tpgb2?file=/src/app/app.component.ts)\n\n---\n\n[**React example (source)**](https://github.com/kozakdenys/qr-code-styling-examples/tree/master/examples/react)\n\n[**Angular example (source)**](https://github.com/kozakdenys/qr-code-styling-examples/tree/master/examples/angular)\n\n[**Vue example (source)**](https://github.com/kozakdenys/qr-code-styling-examples/tree/master/examples/vue)\n\n---\n\n### API Documentation\n\n#### QRCodeStyling instance\n`new QRCodeStyling(options) => QRCodeStyling`\n\nParam  |Type  |Description\n-------|------|------------\noptions|object|Init object\n\n`options` structure\n\nProperty               |Type                     |Default Value|Description\n-----------------------|-------------------------|-------------|-----------------------------------------------------\nwidth                  |number                   |`300`        |Size of canvas\nheight                 |number                   |`300`        |Size of canvas\ntype                   |string (`'canvas' 'svg'`)|`canvas`     |The type of the element that will be rendered\ndata                   |string                   |             |The date will be encoded to the QR code\nimage                  |string                   |             |The image will be copied to the center of the QR code\nmargin                 |number                   |`0`          |Margin around canvas\nqrOptions              |object                   |             |Options will be passed to `qrcode-generator` lib\nimageOptions           |object                   |             |Specific image options, details see below\ndotsOptions            |object                   |             |Dots styling options\ncornersSquareOptions   |object                   |             |Square in the corners styling options\ncornersDotOptionsHelper|object                   |             |Dots in the corners styling options\nbackgroundOptions      |object                   |             |QR background styling options\n\n`options.qrOptions` structure\n\nProperty            |Type                                              |Default Value\n--------------------|--------------------------------------------------|-------------\ntypeNumber          |number (`0 - 40`)                                 |`0`\nmode                |string (`'Numeric' 'Alphanumeric' 'Byte' 'Kanji'`)|\nerrorCorrectionLevel|string (`'L' 'M' 'Q' 'H'`)                        |`'Q'`\n\n`options.imageOptions` structure\n\nProperty          |Type                                   |Default Value|Description\n------------------|---------------------------------------|-------------|------------------------------------------------------------------------------\nhideBackgroundDots|boolean                                |`true`       |Hide all dots covered by the image\nimageSize         |number                                 |`0.4`        |Coefficient of the image size. Not recommended to use ove 0.5. Lower is better\nmargin            |number                                 |`0`          |Margin of the image in px\ncrossOrigin       |string(`'anonymous' 'use-credentials'`)|             |Set \"anonymous\" if you want to download QR code from other origins.\n\n`options.dotsOptions` structure\n\nProperty|Type                                                                          |Default Value|Description\n--------|------------------------------------------------------------------------------|-------------|-------------------\ncolor   |string                                                                        |`'#000'`     |Color of QR dots\ngradient|object                                                                        |             |Gradient of QR dots\ntype    |string (`'rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded'`)|`'square'`   |Style of QR dots\n\n`options.backgroundOptions` structure\n\nProperty|Type  |Default Value\n--------|------|-------------\ncolor   |string|`'#fff'`\ngradient|object|\n\n`options.cornersSquareOptions` structure\n\nProperty|Type                                     |Default Value|Description\n--------|-----------------------------------------|-------------|-----------------\ncolor   |string                                   |             |Color of Corners Square\ngradient|object                                   |             |Gradient of Corners Square\ntype    |string (`'dot' 'square' 'extra-rounded'`)|             |Style of Corners Square\n\n`options.cornersDotOptions` structure\n\nProperty|Type                     |Default Value|Description\n--------|-------------------------|-------------|-----------------\ncolor   |string                   |             |Color of Corners Dot\ngradient|object                   |             |Gradient of Corners Dot\ntype    |string (`'dot' 'square'`)|             |Style of Corners Dot\n\nGradient structure\n\n`options.dotsOptions.gradient`\n\n`options.backgroundOptions.gradient`\n\n`options.cornersSquareOptions.gradient`\n\n`options.cornersDotOptions.gradient`\n\nProperty  |Type                        |Default Value|Description\n----------|----------------------------|-------------|---------------------------------------------------------\ntype      |string (`'linear' 'radial'`)|\"linear\"     |Type of gradient spread\nrotation  |number                      |0            |Rotation of gradient in radians (Math.PI === 180 degrees)\ncolorStops|array of objects            |             |Gradient colors. Example `[{ offset: 0, color: 'blue' }, {  offset: 1, color: 'red' }]`\n\nGradient colorStops structure\n\n`options.dotsOptions.gradient.colorStops[]`\n\n`options.backgroundOptions.gradient.colorStops[]`\n\n`options.cornersSquareOptions.gradient.colorStops[]`\n\n`options.cornersDotOptions.gradient.colorStops[]`\n\nProperty|Type            |Default Value|Description\n--------|----------------|-------------|-----------------------------------\noffset  |number (`0 - 1`)|             |Position of color in gradient range\ncolor   |string          |             |Color of stop in gradient range\n\n#### QRCodeStyling methods\n`QRCodeStyling.append(container) => void`\n\nParam    |Type       |Description\n---------|-----------|-----------\ncontainer|DOM element|This container will be used for appending of the QR code\n\n`QRCodeStyling.getRawData(extension) => Promise<Blob>`\n\nParam    |Type                                |Default Value|Description\n---------|------------------------------------|-------------|------------\nextension|string (`'png' 'jpeg' 'webp' 'svg'`)|`'png'`      |Blob type\n\n`QRCodeStyling.update(options) => void`\n\nParam  |Type  |Description\n-------|------|--------------------------------------\noptions|object|The same options as for initialization\n\n`QRCodeStyling.applyExtension(extension) => void`\n\nParam    |Type                  |Description\n---------|----------------------|------------------------------------------------------------------------------------------\nextension|(svg, options) => void|Extension is a function that takes svg and previously applied options and modifies an svg\n\n`applyExtension` example\n\n```JS\nconst extension = (svg, options) => {\n    const { width, height } = options;\n    const size = Math.min(width, height);\n    const border = document.createElementNS(\"http://www.w3.org/2000/svg\", \"rect\");\n    const borderAttributes = {\n        \"fill\": \"none\",\n        \"x\": (width - size + 40) / 2,\n        \"y\": (height - size + 40) / 2,\n        \"width\": size - 40,\n        \"height\": size - 40,\n        \"stroke\": 'black',\n        \"stroke-width\": 40,\n        \"rx\": 100,\n    };\n    Object.keys(borderAttributes).forEach(attribute => {\n      border.setAttribute(attribute, borderAttributes[attribute]);\n    });\n    svg.appendChild(border);\n};\n```\n\n`QRCodeStyling.deleteExtension() => void`\n\n`QRCodeStyling.download(downloadOptions) => Promise<void>`\n\nParam          |Type  |Description\n---------------|------|------------\ndownloadOptions|object|Options with extension and name of file (not required)\n\n`downloadOptions` structure\n\nProperty |Type                                |Default Value|Description\n---------|------------------------------------|-------------|-----------------------------------------------------\nname     |string                              |`'qr'`       |Name of the downloaded file\nextension|string (`'png' 'jpeg' 'webp' 'svg'`)|`'png'`      |File extension\n\n### Building this repo\n\nIf you get an error running `npm install` referring to `node-pre-gyp`, this is caused by an attempt to compile the [`canvas` dependency](https://github.com/Automattic/node-canvas#compiling). See Compiling instructions in the README. For example on MacOS you need to install dependencies: `brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman`.\n\n### License\n\n[MIT License](https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/LICENSE). Copyright (c) 2021 Denys Kozak\n\n","readmeFilename":"README.md"}