{"_id":"styled-qr-code","name":"styled-qr-code","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"styled-qr-code","version":"1.0.0","description":"Add a style and an image to your QR code","main":"lib/styled-qr-code.js","types":"lib/index.d.ts","dependencies":{"qrcode-generator":"^1.4.4"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^5.35.1","@typescript-eslint/parser":"^5.35.1","canvas":"^2.9.3","clean-webpack-plugin":"^4.0.0","eslint":"^8.23.0","eslint-config-prettier":"^8.5.0","eslint-plugin-jest":"^26.8.7","eslint-plugin-prettier":"^4.2.1","eslint-webpack-plugin":"^3.2.0","html-webpack-plugin":"^5.5.0","jest":"^28.1.3","prettier":"^2.7.1","ts-jest":"^28.0.8","ts-loader":"^9.3.1","typescript":"^4.8.2","webpack":"^5.74.0","webpack-cli":"^4.10.0","webpack-dev-server":"^4.10.0","webpack-merge":"^5.8.0"},"scripts":{"build":"webpack --mode=production --config webpack.config.build.js","build:dev":"webpack --mode=development --config webpack.config.build.js","test":"jest","start":"webpack serve --open --config webpack.config.dev-server.js","publish":"npm run build && npm publish"},"repository":{"type":"git","url":"git+https://github.com/KilianB/styled-qr-code.git"},"keywords":["qr","qrcode","qr-code","js","qrjs","qrstyling","styling","qrbranding","branding","qrimage","image","qrlogo","logo","design"],"author":{"name":"Kilian Brachtendorf","email":"kilian@brachtendorf.dev"},"contributors":[{"name":"Denys Kozak","email":"kozak.denys.dev@gmail.com"}],"license":"MIT","bugs":{"url":"https://github.com/KilianB/styled-qr-code/issues"},"homepage":"https://github.com/KilianB/styled-qr-code","gitHead":"2490ca05eb86970b4b0782a2a676bd089b187b6b","_id":"styled-qr-code@1.0.0","_nodeVersion":"18.8.0","_npmVersion":"8.18.0","dist":{"integrity":"sha512-Tye/Omr8VYUUUCiBE+GNMeJ1Tt0cIsDkLXnQGG6/Xxegyd1021wQKFAFvx/hjaTUrfwpmukWTZfXs3uc/XXN0g==","shasum":"6d2651dfb6141ef1f15ad3e8226aacb02fc124dd","tarball":"https://registry.npmjs.org/styled-qr-code/-/styled-qr-code-1.0.0.tgz","fileCount":44,"unpackedSize":332271,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcjP+yP3RiagHskEjk/PjaZlzJeUaPTw3JIgj8YQJxZAIgIy7vwai3Gv0fDSWPN/YGxvABX+Fl389Cg9p5qAMLFEY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjCy8AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruRg/8CyM3Z955gOXkvMF4ggDmQz6IegAp2PrAgXEBwkc4/CaCMfhw\r\n85MtGvk0Tj5T1613J51eYQNAQGfc/fljzT8DB3pttcZJY+TATay4qcK6Yr34\r\ny4+ZTQdLGE+iUPyfiaEhMSvWBMFf0xfTj5VIM+Suq1AtXOYbzoUQIPAOgiYr\r\n7zQMYHqTt4E7TIEQQvl15pG6BvRTf/GqvZmFooLOMnPqRpkeUNrqsx8L2gxg\r\nBVH9t1LId28RL07cAUGc6JtP9LxeGPQrFkf3TdIAfAZRT2S3tUHK7rMd+ZYx\r\no61rVOSjAUKbm1t4U98uV04ZadYmFq6kzfzZbcoGRO/xZHyLIiDn9iHtm2Ii\r\nG10TLPiSunM9+1oR/tCtvILKlXQpbUlIW4jJs4xXO6NMJQz10SURba1BOHSK\r\nDex7SjM6RHAUdSxqMKaLPIZBr3tGU7tcQmqhqgAWcVvebeJlMgcYyPrC1E3R\r\n5wzKWYEuS4oVR0S7/Yxv01y2lUtQXdIuDCMu5mCgDAVJEDYUCDRjwdTQOrWU\r\neQtlWFkTFNAkjZJSMWNscHDZ4cd4CuCh+Xpn8QgDVJTi+dnubO0jh36xFX8f\r\nZZ8YkDl1sroN9zjHRVJJCqmzlCe+tJnA5wlS5gMpeLEuXWWEHK9SwP97DRS+\r\nAO+3MjhKD3TuUuEBPtXd/Ykp/r1IygZwgmQ=\r\n=O52K\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kilian19","email":"kilian@brachtendorf.dev"},"directories":{},"maintainers":[{"name":"kilian19","email":"kilian@brachtendorf.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-qr-code_1.0.0_1661677312142_0.5071981737871807"},"_hasShrinkwrap":false}},"time":{"created":"2022-08-28T09:01:52.141Z","1.0.0":"2022-08-28T09:01:52.379Z","modified":"2022-08-28T09:01:52.520Z"},"maintainers":[{"name":"kilian19","email":"kilian@brachtendorf.dev"}],"description":"Add a style and an image to your QR code","homepage":"https://github.com/KilianB/styled-qr-code","keywords":["qr","qrcode","qr-code","js","qrjs","qrstyling","styling","qrbranding","branding","qrimage","image","qrlogo","logo","design"],"repository":{"type":"git","url":"git+https://github.com/KilianB/styled-qr-code.git"},"contributors":[{"name":"Denys Kozak","email":"kozak.denys.dev@gmail.com"}],"author":{"name":"Kilian Brachtendorf","email":"kilian@brachtendorf.dev"},"bugs":{"url":"https://github.com/KilianB/styled-qr-code/issues"},"license":"MIT","readme":"# QR Code Styling\r\n\r\n[![Version](https://img.shields.io/npm/v/styled-qr-code.svg)](https://www.npmjs.org/package/styled-qr-code)\r\n\r\nJavaScript library for generating QR codes with a logo and styling.\r\n\r\nThis is a fork of the currently unmaintained [repository by kozakdenys](https://github.com/kozakdenys/qr-code-styling) fixing multiple issues:\r\n\r\n- [#49](https://github.com/kozakdenys/qr-code-styling/issues/105) [#105 QR code is not valid by some scanners](https://github.com/kozakdenys/qr-code-styling/issues/105)\r\n- outdated dependencies\r\n- release for es2017\r\n\r\nTry the old version here https://qr-code-styling.com to get a feel\r\n\r\n### Examples\r\n\r\n<p float=\"left\">\r\n<img style=\"display:inline-block\" src=\"https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/src/assets/facebook_example_new.png\" width=\"240\" />\r\n<img style=\"display:inline-block\" src=\"https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/src/assets/qr_code_example.png\" width=\"240\" />\r\n<img style=\"display:inline-block\" src=\"https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/src/assets/telegram_example_new.png\" width=\"240\" />\r\n</p>\r\n\r\n### Installation\r\n\r\n```\r\nnpm install styled-qr-code\r\n```\r\n\r\nor\r\n\r\n```\r\nyarn add styled-qr-code\r\n```\r\n\r\n### Usage\r\n\r\n```HTML\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <title>QR Code Styling</title>\r\n    <script type=\"text/javascript\" src=\"https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js\"></script>\r\n</head>\r\n<body>\r\n<div id=\"canvas\"></div>\r\n<script type=\"text/javascript\">\r\n\r\n    const qrCode = new QRCodeStyling({\r\n        width: 300,\r\n        height: 300,\r\n        type: \"svg\",\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        },\r\n        backgroundOptions: {\r\n            color: \"#e9ebee\",\r\n        },\r\n        imageOptions: {\r\n            crossOrigin: \"anonymous\",\r\n            margin: 20\r\n        }\r\n    });\r\n\r\n    qrCode.append(document.getElementById(\"canvas\"));\r\n    qrCode.download({ name: \"qr\", extension: \"svg\" });\r\n</script>\r\n</body>\r\n</html>\r\n```\r\n\r\n---\r\n\r\n[**React example (Codesandbox)**](https://codesandbox.io/s/qr-code-styling-react-example-l8rwl?file=/src/App.js)\r\n\r\n[**Angular example (Codesandbox)**](https://codesandbox.io/s/agitated-panini-tpgb2?file=/src/app/app.component.ts)\r\n\r\n---\r\n\r\n[**React example (source)**](https://github.com/kozakdenys/qr-code-styling-examples/tree/master/examples/react)\r\n\r\n[**Angular example (source)**](https://github.com/kozakdenys/qr-code-styling-examples/tree/master/examples/angular)\r\n\r\n[**Vue example (source)**](https://github.com/kozakdenys/qr-code-styling-examples/tree/master/examples/vue)\r\n\r\n---\r\n\r\n### API Documentation\r\n\r\n#### QRCodeStyling instance\r\n\r\n`new QRCodeStyling(options) => QRCodeStyling`\r\n\r\n| Param   | Type   | Description |\r\n| ------- | ------ | ----------- |\r\n| options | object | Init object |\r\n\r\n`options` structure\r\n\r\n| Property                | Type                      | Default Value | Description                                                                                   |\r\n| ----------------------- | ------------------------- | ------------- | --------------------------------------------------------------------------------------------- |\r\n| width                   | number                    | `300`         | Size of canvas                                                                                |\r\n| height                  | number                    | `300`         | Size of canvas                                                                                |\r\n| type                    | string (`'canvas' 'svg'`) | `canvas`      | The type of the element that will be rendered                                                 |\r\n| data                    | string                    |               | The date will be encoded to the QR code                                                       |\r\n| image                   | string                    |               | The image will be copied to the center of the QR code                                         |\r\n| margin                  | number                    | `0`           | Margin around canvas                                                                          |\r\n| qrOptions               | object                    |               | Options will be passed to `qrcode-generator` lib                                              |\r\n| imageOptions            | object                    |               | Specific image options, details see below                                                     |\r\n| dotsOptions             | object                    |               | Dots styling options                                                                          |\r\n| cornersSquareOptions    | object                    |               | Square in the corners styling options                                                         |\r\n| cornersDotOptionsHelper | object                    |               | Dots in the corners styling options                                                           |\r\n| backgroundOptions       | object                    |               | QR background styling options                                                                 |\r\n| useLegacyDotRotation    | boolean                   | false         | Use the mirrored qr creation strategy of the original library. (Some scanners might not work) |\r\n\r\n`options.qrOptions` structure\r\n\r\n| Property             | Type                                               | Default Value |\r\n| -------------------- | -------------------------------------------------- | ------------- |\r\n| typeNumber           | number (`0 - 40`)                                  | `0`           |\r\n| mode                 | string (`'Numeric' 'Alphanumeric' 'Byte' 'Kanji'`) |\r\n| errorCorrectionLevel | string (`'L' 'M' 'Q' 'H'`)                         | `'Q'`         |\r\n\r\n`options.imageOptions` structure\r\n\r\n| Property           | Type                                    | Default Value | Description                                                                    |\r\n| ------------------ | --------------------------------------- | ------------- | ------------------------------------------------------------------------------ |\r\n| hideBackgroundDots | boolean                                 | `true`        | Hide all dots covered by the image                                             |\r\n| imageSize          | number                                  | `0.4`         | Coefficient of the image size. Not recommended to use ove 0.5. Lower is better |\r\n| margin             | number                                  | `0`           | Margin of the image in px                                                      |\r\n| crossOrigin        | string(`'anonymous' 'use-credentials'`) | `anonymous`   |                                                                                |\r\n\r\n`options.dotsOptions` structure\r\n\r\n| Property | Type                                                                           | Default Value | Description         |\r\n| -------- | ------------------------------------------------------------------------------ | ------------- | ------------------- |\r\n| color    | string                                                                         | `'#000'`      | Color of QR dots    |\r\n| gradient | object                                                                         |               | Gradient of QR dots |\r\n| type     | string (`'rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded'`) | `'square'`    | Style of QR dots    |\r\n\r\n`options.backgroundOptions` structure\r\n\r\n| Property | Type   | Default Value |\r\n| -------- | ------ | ------------- |\r\n| color    | string | `'#fff'`      |\r\n| gradient | object |\r\n\r\n`options.cornersSquareOptions` structure\r\n\r\n| Property | Type                                      | Default Value | Description                |\r\n| -------- | ----------------------------------------- | ------------- | -------------------------- |\r\n| color    | string                                    |               | Color of Corners Square    |\r\n| gradient | object                                    |               | Gradient of Corners Square |\r\n| type     | string (`'dot' 'square' 'extra-rounded'`) |               | Style of Corners Square    |\r\n\r\n`options.cornersDotOptions` structure\r\n\r\n| Property | Type                      | Default Value | Description             |\r\n| -------- | ------------------------- | ------------- | ----------------------- |\r\n| color    | string                    |               | Color of Corners Dot    |\r\n| gradient | object                    |               | Gradient of Corners Dot |\r\n| type     | string (`'dot' 'square'`) |               | Style of Corners Dot    |\r\n\r\nGradient structure\r\n\r\n`options.dotsOptions.gradient`\r\n\r\n`options.backgroundOptions.gradient`\r\n\r\n`options.cornersSquareOptions.gradient`\r\n\r\n`options.cornersDotOptions.gradient`\r\n\r\n| Property   | Type                         | Default Value | Description                                                                            |\r\n| ---------- | ---------------------------- | ------------- | -------------------------------------------------------------------------------------- |\r\n| type       | string (`'linear' 'radial'`) | \"linear\"      | Type of gradient spread                                                                |\r\n| rotation   | number                       | 0             | Rotation of gradient in radians (Math.PI === 180 degrees)                              |\r\n| colorStops | array of objects             |               | Gradient colors. Example `[{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }]` |\r\n\r\nGradient colorStops structure\r\n\r\n`options.dotsOptions.gradient.colorStops[]`\r\n\r\n`options.backgroundOptions.gradient.colorStops[]`\r\n\r\n`options.cornersSquareOptions.gradient.colorStops[]`\r\n\r\n`options.cornersDotOptions.gradient.colorStops[]`\r\n\r\n| Property | Type             | Default Value | Description                         |\r\n| -------- | ---------------- | ------------- | ----------------------------------- |\r\n| offset   | number (`0 - 1`) |               | Position of color in gradient range |\r\n| color    | string           |               | Color of stop in gradient range     |\r\n\r\n#### QRCodeStyling methods\r\n\r\n`QRCodeStyling.append(container) => void`\r\n\r\n| Param     | Type        | Description                                              |\r\n| --------- | ----------- | -------------------------------------------------------- |\r\n| container | DOM element | This container will be used for appending of the QR code |\r\n\r\n`QRCodeStyling.getRawData(extension) => Promise<Blob>`\r\n\r\n| Param     | Type                                 | Default Value | Description |\r\n| --------- | ------------------------------------ | ------------- | ----------- |\r\n| extension | string (`'png' 'jpeg' 'webp' 'svg'`) | `'png'`       | Blob type   |\r\n\r\n`QRCodeStyling.update(options) => void`\r\n\r\n| Param   | Type   | Description                            |\r\n| ------- | ------ | -------------------------------------- |\r\n| options | object | The same options as for initialization |\r\n\r\n`QRCodeStyling.download(downloadOptions, quality) => Promise<void>`\r\n\r\n| Param           | Type   | Description                                                                                                                                                                                                                                                                                                 |\r\n| --------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| downloadOptions | object | Options with extension and name of file (not required)                                                                                                                                                                                                                                                      |\r\n| quality         | number | A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range. |\r\n\r\n`downloadOptions` structure\r\n\r\n| Property  | Type                                 | Default Value | Description                 |\r\n| --------- | ------------------------------------ | ------------- | --------------------------- |\r\n| name      | string                               | `'qr'`        | Name of the downloaded file |\r\n| extension | string (`'png' 'jpeg' 'webp' 'svg'`) | `'png'`       | File extension              |\r\n\r\n`QRCodeStyling.toDataUrl(extension, quality) => Promise<void>`\r\n\r\n| Param     | Type                           | Default Value | Description                                                                                                                                                                                                                                                                                                  |\r\n| --------- | ------------------------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\r\n| extension | string (`'png' 'jpeg' 'webp')` | 'png'         | Blob type                                                                                                                                                                                                                                                                                                    |\r\n| quality   | number                         | undefined     | [A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range. |\r\n\r\n### License\r\n\r\n[MIT License](https://raw.githubusercontent.com/kozakdenys/qr-code-styling/master/LICENSE). Copyright (c) 2021 Denys Kozak\r\n","readmeFilename":"README.md"}