{"id":17984112,"url":"https://github.com/shadowmoose/q-art-codes","last_synced_at":"2025-07-19T13:11:03.548Z","repository":{"id":37083227,"uuid":"271385310","full_name":"shadowmoose/Q-Art-Codes","owner":"shadowmoose","description":"Generate beautiful QR codes with background images, on your browser or server.","archived":false,"fork":false,"pushed_at":"2023-03-04T23:40:25.000Z","size":1537,"stargazers_count":43,"open_issues_count":7,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-28T15:47:43.635Z","etag":null,"topics":["javascript","node","qrcode","seotools"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shadowmoose.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":null,"patreon":"ShadowMoose","open_collective":null,"ko_fi":"TheShadowMoose","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-06-10T21:05:06.000Z","updated_at":"2024-10-16T16:50:10.000Z","dependencies_parsed_at":"2024-01-19T03:00:17.702Z","dependency_job_id":"78c1e857-334f-4954-b0eb-d4a573ab4c93","html_url":"https://github.com/shadowmoose/Q-Art-Codes","commit_stats":{"total_commits":41,"total_committers":2,"mean_commits":20.5,"dds":0.2682926829268293,"last_synced_commit":"639981827e8b229ca87eb0054b5c2d50a3e97111"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadowmoose%2FQ-Art-Codes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadowmoose%2FQ-Art-Codes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadowmoose%2FQ-Art-Codes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadowmoose%2FQ-Art-Codes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shadowmoose","download_url":"https://codeload.github.com/shadowmoose/Q-Art-Codes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222090823,"owners_count":16929472,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","node","qrcode","seotools"],"created_at":"2024-10-29T18:19:32.536Z","updated_at":"2024-10-29T18:19:33.202Z","avatar_url":"https://github.com/shadowmoose.png","language":"TypeScript","funding_links":["https://patreon.com/ShadowMoose","https://ko-fi.com/TheShadowMoose"],"categories":[],"sub_categories":[],"readme":"# Q-Art-Codes [![](https://data.jsdelivr.com/v1/package/npm/qart-codes/badge)](https://www.jsdelivr.com/package/npm/qart-codes) [![npm](https://img.shields.io/npm/v/qart-codes?style=flat-square)](https://www.npmjs.com/package/qart-codes) ![](https://raw.githubusercontent.com/shadowmoose/Q-Art-Codes/image-data/loc-badge.svg)\nMy own \"fancy\" browser-and-server-side QR Code generator.\n\nIt generates QR Codes with image backgrounds, supporting any size, data, or color combinations you want.\n\nThis is built in pure JavaScript, so it should run anywhere. A bundle has also been provided for browser use.\n\n[![](./examples/images/sample1.png)\n![](./examples/images/sample2.png)\n![](./examples/images/sample3.png)](https://shadowmoose.github.io/Q-Art-Codes/examples/editor.html)\n\nEdit your own image and check out the options [in-browser here](https://shadowmoose.github.io/Q-Art-Codes/examples/editor.html).\n\n## Installation:\nSimply run `npm i qart-codes`\n\n## Use guide:\n\n### NodeJS:\n```js\nconst qr = require('qart-codes');\nconst fs = require('fs');\n\nqr(\n\t`{\"lastName\":\"ever\",\"firstName\":\"greatest\",\"employeeID\":1337,\"online\":true}`, // Data to encode - string or binary array.\n\t\"C:\\\\CompanyLogo.png\" // The background image to use.\n).then(async res =\u003e {\n\tawait res.toStream(fs.createWriteStream(outPath));  // Write to a file, or choose another output stream.\n})\n```\n\n### Browser:\n```html\n\u003c!-- Download this locally or pin the version in production, the code at this link can change: --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/qart-codes/dist/index-browser.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n\tmakeQR(\n\t\t`https://shadowmoo.se`,\n\t\t\"https://i.imgur.com/7tMdIX9.png\",\n\t\t{\n\t\t\tcolors: {\n\t\t\t\tdark: 'rgba(37,45,206, 1.0)',\n\t\t\t\tlight: 'white'\n\t\t\t}\n\t\t}\n\t).then(async canv =\u003e {\n\t\tconst uri = URL.createObjectURL(await canv.toBlob('image/png', 0.95)); // The browser encodes to Object URIs.\n\t\tconst img = new Image();\n\t\timg.src = uri;\n\t\tdocument.body.appendChild(img);\n\t})\n\u003c/script\u003e\n```\n\n\n## Full Generator Options:\nThis config is the same in the browser and server.\nHere are all the options, with sample values:\n```js\nconst opts = {\n    qrOpts: {\n        version: 2,  // You may pin the QR version used here, no lower than 2.\n        errorCorrectionLevel: 'H'  // See https://www.npmjs.com/package/qrcode#error-correction-level\n    },\n    size: {\n        boxSize: 6,  // The base size, in px, that each square should take in the grid.\n        scale: 0.35  // Scale the \"small\" boxes down to this ratio.\n    },\n    colors: {\n        dark: 'black',  // The color to use for the dark squares.\n        light: 'white', // The color to use for the light squares.\n        overlay: 'rgba(0,0,0,0.7)'  // If set, cover the background image in a color - this can be used to increase readability.\n    },\n    useSVG: false  // See \"Encoding SVGs\".\n}\n```\n\n## Platform Differences:\nFor the most part, the code runs the same in the browser and in Node.\nHowever, due to limitations in each environment, the result object behaves differently with binary image data.\n\n+ In the Browser, the canvas `toBlob('image/png', 0.95)` accepts an image mimetype, and a quality level.\n  + It returns a Blob, which can be used to create images in the DOM.\n\n+ In Node, the canvas `toStream(stream)` accepts an output stream, which it writes binary PNG image data to.\n  + There is no return value for this call, as it is assumed Node will be sending or saving this image.\n\n\n## Encoding SVGs:\nSVG output is tentatively supported in the Browser \u0026 Node as of version 2.0.0.\n\nWhen `useSVG` is enabled, the output `toSVG()` will always return raw SVG text, no matter the platform running the code.\nAdditionally, the given background image MUST be a pre-loaded string, containing the background SVG text.\n\nYou may have to do some manual formatting of your input background SVG, if you want things to look a specific way.\nThe encoder tries to fix some of the more common issues, but it is not able to fix everything automatically.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshadowmoose%2Fq-art-codes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshadowmoose%2Fq-art-codes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshadowmoose%2Fq-art-codes/lists"}