Nodejs on foosel.nethttps://foosel.net/tags/nodejs/Recent content in Nodejs on foosel.netHugoen-usGina Häußge (foosel)Mon, 06 Feb 2023 00:00:00 +0000How to quickly generate a QR Code with transparent backgroundhttps://foosel.net/til/how-to-quickly-generate-a-qr-code-with-transparent-background/Mon, 06 Feb 2023 00:00:00 +0000https://foosel.net/til/how-to-quickly-generate-a-qr-code-with-transparent-background/<p>For an upcoming presentation I wanted to quickly generate a QR Code of my web site&rsquo;s URL to include on the final slide. Since my slide theme has a green gradient background with white text, I wanted the QR Code to be white on a transparent background, as a PNG.</p> <p>Enter <a href="https://github.com/soldair/node-qrcode">node-qrcode</a> which runs easily via <code>npx</code><sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>:</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>npx qrcode -o output.png -d FFFF -l <span style="color:#ae81ff">0000</span> -w <span style="color:#ae81ff">500</span> <span style="color:#e6db74">&#34;https://foosel.net&#34;</span> </span></span></code></pre></div><ul> <li><code>-o output.png</code> sets the output file</li> <li><code>-d FFFF</code> sets the dark color (usually black) to white with 100% opacity</li> <li><code>-l 0000</code> sets the light color (usually white) to black with 0% opacity - fully transparent</li> <li><code>-w 500</code> sets the size to 500px</li> </ul> <p>For further options like error correction or QR code version, or how to use it as a library or in the browser, see node-qrcode&rsquo;s repo linked above.</p>For an upcoming presentation I wanted to quickly generate a QR Code of my web site’s URL to include on the final slide. Since my slide theme has a green gradient background with white text, I wanted the QR Code to be white on a transparent background, as a PNG.

Enter node-qrcode which runs easily via npx1:

npx qrcode -o output.png -d FFFF -l 0000 -w 500  "https://foosel.net"
  • -o output.png sets the output file
  • -d FFFF sets the dark color (usually black) to white with 100% opacity
  • -l 0000 sets the light color (usually white) to black with 0% opacity - fully transparent
  • -w 500 sets the size to 500px

For further options like error correction or QR code version, or how to use it as a library or in the browser, see node-qrcode’s repo linked above.

I for one am happy with the result of this little exercise:

The final slide of a presentation. It says “Thank you for you attention!”. Below that I’ve listed my Mastodon account @foosel@chaos.social, my GitHub account @foosel and my website’s address foosel.net. A big white QR Code is placed right underneath, a handdrawn arrow points from website to code.

  1. Yes, there are also online services that can do this for you, no, I didn’t want to look through dozens of them trying to find one that didn’t attempt to make me subscribe to something just to change the color of the generated QR code. Local CLI ftw. ↩︎

]]>