{"id":15924052,"url":"https://github.com/englishextra/qrjs2","last_synced_at":"2025-10-19T08:05:04.011Z","repository":{"id":18746082,"uuid":"85212449","full_name":"englishextra/qrjs2","owner":"englishextra","description":"QR code generating with vanilla js (SVG Element, Data URI SVG String, Data URI PNG String, HTML Table Element).","archived":false,"fork":false,"pushed_at":"2021-09-30T17:10:05.000Z","size":1249,"stargazers_count":75,"open_issues_count":0,"forks_count":12,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-07T07:48:33.436Z","etag":null,"topics":["app","front-end","html","javascript","js","qr","qr-code","qrcode","qrcode-generator","svg","svg-images","vanilla-js","webapp"],"latest_commit_sha":null,"homepage":"https://codepen.io/englishextra/pen/NpwjKW","language":"JavaScript","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/englishextra.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-16T15:36:36.000Z","updated_at":"2023-10-03T14:33:45.000Z","dependencies_parsed_at":"2022-07-25T06:46:52.270Z","dependency_job_id":null,"html_url":"https://github.com/englishextra/qrjs2","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/englishextra%2Fqrjs2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/englishextra%2Fqrjs2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/englishextra%2Fqrjs2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/englishextra%2Fqrjs2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/englishextra","download_url":"https://codeload.github.com/englishextra/qrjs2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221968666,"owners_count":16909278,"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":["app","front-end","html","javascript","js","qr","qr-code","qrcode","qrcode-generator","svg","svg-images","vanilla-js","webapp"],"created_at":"2024-10-06T21:04:15.388Z","updated_at":"2025-10-19T08:04:58.990Z","avatar_url":"https://github.com/englishextra.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# qrjs2\n\nQR code generating with vanilla js (SVG Element, Data URI SVG String, Data URI PNG String, HTML Table Element).\nBased on [lifthrasiir/qr.js](https://github.com/lifthrasiir/qr.js)\n\n[![npm](https://img.shields.io/npm/v/qrjs2.svg)](https://www.npmjs.com/package/qrjs2)\n[![Build Status](https://travis-ci.com/englishextra/qrjs2.svg?branch=master)](https://travis-ci.com/englishextra/qrjs2)\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/031cf1474c704567afbb07b79ea63d82)](https://www.codacy.com/manual/englishextra/qrjs2/dashboard?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=englishextra/qrjs2\u0026amp;utm_campaign=Badge_Grade)\n[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/qrjs2/badge)](https://www.jsdelivr.com/package/npm/qrjs2)\n\n## Demo\n\n[codepen](https://codepen.io/englishextra/full/NpwjKW)\n[jsfiddle](https://fiddle.jshell.net/englishextra/Lp37dL94/show/)\n[jsbin](https://output.jsbin.com/hobetuh/)\n\n## Fixes / Added Features\n\n* `generateSVG` now works in Edge 13 and IE 11\n* `generateSVG` supports different colors for same page SVGs\n* `textcolor` and `fillcolor` options introduced\n* `innerHTML` replaced with `document.createDocumentFragment()`\n\n## CDN\n\n### jsDelivr\n\n`https://cdn.jsdelivr.net/gh/englishextra/qrjs2@latest/js/qrjs2.min.js`\n\n### unpkg\n\n`https://unpkg.com/qrjs2@latest/js/qrjs2.js`\n\n## Usage and Output\n\n## Install\n\n`npm install qrjs2`\n\n### SVG Element (yeah, give it to me)\n\n```js\nvar div = document.createElement(\"div\"),\ntext = \"https://github.com\",\nqr = QRCode.generateSVG(text, {\n    ecclevel: \"M\",\n    fillcolor: \"#F2F2F2\",\n    textcolor: \"#D13438\",\n    margin: 4,\n    modulesize: 8\n  });\ndiv.appendChild(qr);\ndocument.body.appendChild(div);\n```\n\nWill add an SVG element to parent DIV:\n\n```svg\n\u003csvg viewBox=\"0 0 264 264\" style=\"shape-rendering:crispEdges\"\u003e\n  \u003cstyle scoped=\"scoped\"\u003e.bg{fill:#F2F2F2}.fg{fill:#D13438}\u003c/style\u003e\n\n  \u003crect class=\"bg\" fill=\"none\" x=\"0\" y=\"0\" width=\"264\" height=\"264\"\u003e\u003c/rect\u003e\n      \u003crect class=\"fg\" fill=\"none\" x=\"32\" y=\"32\" width=\"8\" height=\"8\"\u003e\u003c/rect\u003e\n    ...\n\u003c/svg\u003e\n```\n\n### Data URI SVG String with Data URI PNG String Fallback\n\n```js\nvar img = document.createElement(\"img\"),\ntext = \"https://github.com\";\nif (document.implementation.hasFeature(\"http://www.w3.org/2000/svg\",\"1.1\")) {\n  var qr = QRCode.generateSVG(text, {\n      ecclevel: \"M\",\n      fillcolor: \"#E6E6E6\",\n      textcolor: \"#486860\",\n      margin: 4,\n      modulesize: 8\n    });\n  var XMLS = new XMLSerializer();\n  qr = XMLS.serializeToString(qr);\n  qr = \"data:image/svg+xml;base64,\" + window.btoa(unescape(encodeURIComponent(qr)));\n} else {\n  var qr = QRCode.generatePNG(text, {\n      ecclevel: \"M\",\n      format: \"html\",\n      fillcolor: \"#CCCCCC\",\n      textcolor: \"#006F94\",\n      margin: 4,\n      modulesize: 8\n    });\n}\nimg.src = qr;\ndocument.body.appendChild(img);\n```\n\nWill add a Data URI SVG string to IMG element's SRC attribute:\n\n```html\n\u003cimg src=\"data:image/svg+xml;base64,...\"\u003e\n```\n\nOr a Data URI PNG string to IMG element's SRC attribute:\n\n```html\n\u003cimg src=\"data:image/png;base64,...\"\u003e\n```\n\n### HTML Table Element\n\n```js\nvar div = document.createElement(\"div\"),\ntext = \"https://github.com\",\nqr = QRCode.generateHTML(text, {\n    ecclevel: \"M\",\n    fillcolor: \"#DCDCDC\",\n    textcolor: \"#5C2E91\",\n    margin: 4,\n    modulesize: 8\n  });\ndiv.appendChild(qr);\ndocument.body.appendChild(div);\n```\n\nWill add an HTML table element to parent DIV:\n\n```html\n\u003ctable style=\"border:32px solid #DCDCDC;background:#DCDCDC\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\"\u003e\n  \u003ctbody\u003e\n      \u003ctr\u003e\n          \u003ctd style=\"width:8px;height:8px;background:#5C2E91\"\u003e\u003c/td\u003e\n      ...\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n```\n\n## License\n\nAvailable under [MIT license](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenglishextra%2Fqrjs2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenglishextra%2Fqrjs2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenglishextra%2Fqrjs2/lists"}