{"id":12090,"date":"2025-12-17T22:29:42","date_gmt":"2025-12-17T22:29:42","guid":{"rendered":"https:\/\/putridparrot.com\/blog\/?p=12090"},"modified":"2025-12-17T22:29:42","modified_gmt":"2025-12-17T22:29:42","slug":"generating-qr-code-with-javascript","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/generating-qr-code-with-javascript\/","title":{"rendered":"Generating QR code with Javascript"},"content":{"rendered":"<p>We can generate QR codes using the package <em>qrcode<\/em>. If we just want this as tooling, such as manually generating, then we can add the following<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nnpm install qrcode --save-dev\r\n<\/pre>\n<p>Now update your packages.json with this script<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&quot;generate:qrs&quot;: &quot;node .\/scripts\/generate-qrs.mjs&quot;,\r\n<\/pre>\n<p>As yo can see, add a scripts folder and create the file generates-qrs.mjs with the following code<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nimport QRCode from &#039;qrcode&#039;;\r\nimport fs from &#039;fs\/promises&#039;;\r\nimport path from &#039;path&#039;;\r\n\r\nconst outDir = path.join(process.cwd(), &#039;public&#039;, &#039;qrcodes&#039;);\r\nawait fs.mkdir(outDir, { recursive: true });\r\n\r\nconst sites = &#x5B;\r\n  { name: &#039;www.mywebsite.co.uk&#039;, url: &#039;https:\/\/www.mywebsite.co.uk&#039; },\r\n];\r\n\r\nfor (const site of sites) {\r\n  const pngPath = path.join(outDir, `${site.name}.png`);\r\n  const svgPath = path.join(outDir, `${site.name}.svg`);\r\n\r\n  console.log(`Generating ${pngPath} and ${svgPath}`);\r\n\r\n  \/\/ PNG (300x300)\r\n  await QRCode.toFile(pngPath, site.url, { width: 300 });\r\n\r\n  \/\/ SVG\r\n  const svgString = await QRCode.toString(site.url, { type: &#039;svg&#039; });\r\n  await fs.writeFile(svgPath, svgString, &#039;utf8&#039;);\r\n}\r\n\r\nconsole.log(`QR codes generated in ${outDir}`);\r\n<\/pre>\n<p>In the above, the sites include a name, this is the name of the file ad we&#8217;ll create a file of type and with suffix PNG and SVG. The url is what&#8217;s embedded into the QR code.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We can generate QR codes using the package qrcode. If we just want this as tooling, such as manually generating, then we can add the following npm install qrcode &#8211;save-dev Now update your packages.json with this script &quot;generate:qrs&quot;: &quot;node .\/scripts\/generate-qrs.mjs&quot;, As yo can see, add a scripts folder and create the file generates-qrs.mjs with the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[45,767],"tags":[],"class_list":["post-12090","post","type-post","status-publish","format-standard","hentry","category-javascript","category-qr"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/12090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=12090"}],"version-history":[{"count":1,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/12090\/revisions"}],"predecessor-version":[{"id":12091,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/12090\/revisions\/12091"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=12090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=12090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=12090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}