Make Your Own QR Codes with Node

Friday's comic showed the frogs' first Bitcoin address as a QR Code framed and hanging on a tree, much like many stores have their first dollar framed. It was a real Bitcoin address, but sadly no one has sent any money to it yet.

I had a bit of a problem getting that QR Code into the comic. If you haven't been reading this blog for long, you may not know that the comics are made out of SVG images. That means I needed a SVG QR Code. No problem, right? There are a bunch of web sites that will generate QR Codes for you in SVG format (this one, this one, this one). Unfortunately, they create them a way which makes it difficult to embed inside another SVG - like my picture frame. I either ended up with nothing, or an incredibly huge file.

Why not try a different approach?

Next I used one of those free online tools to make a .PNG version of the QR Code. It was a very small file, and I could embed the image inside the SVG of the picture frame. Great! Unlike a "pure" SVG, it will pixilize a little when scaled but it's a bunch of blocks to begin with! No problem!

Unless I want it to show up on iOS devices. Bugger!

For whatever reason, the iOS browser doesn't display the image embedded in the SVG. I was, therefore, forced to return to the SVG approach. I had to do it with two separate files - one for the empty frame and one for the QR Code in it. Not exactly what I wanted, but it works.

There is some good that came out of this, however. In my research, I came upon a really nice Node module for generating your own QR Codes in PNG or SVG format. Why rely on some other website to do it for me? It's called simply qr-image, and it has no other package dependencies.

In just a few lines of code, I was able to add a feature to my website which enables me to make all the QR Codes I want. If you use the Express framework, as I do, you can make a simple app like this, just for QR Code generation:

var express = require("express");
var qr = require("qr-image");
var app = express();

app.get("/qrc", function(req, res, next) {

    var text = req.query.text;
    res.setHeader("Content-Type", "image/png");
    res.send(qr.imageSync(text, {type: "png"}));

});

// ------------ start listening
var server = app.listen(3000, function() {
    console.log("listening on port %d", server.address().port);
});

Launch that app, point your browser to

http://localhost:3000/qrc?text=some+text+here

and you should see a nice QR Code. Put anything you want as the value of the text parameter, such as URLs, Bitcoin addresses, secret codes, etc. If you don't want to type the URL out manually, set up a simple web page form that submits the data. Or create your own custom routes that encode data from another source. The possibilities are endless. Well, maybe not endless. But certainly very numerous.

In today's comic, the frogs are trying to find something else that is endless...

Amphibian.com comic for 11 May 2015