Generating QR code with custom colors, shapes, and a photo.

Generating QR code with custom colors, shapes, and a photo.
Customized QR CodeNode.jsAWS Lambda

We are surrounded by QR codes today, they are everywhere, almost all over the world. As QR technology becomes widespread, we have seen a similar proliferation in libraries and tools that have come to blossom in this eco-system. This post is about a new free service I recently created. You can generated stylized QR codes, with custom colors, shapes, and a photo, for free.

Base URL

The API can be accessed at

Base URLhttps://asia-east2-bishalspkt.cloudfunctions.net/qr-function-cf2a546

Without any parameters, this API generates a QR code with default values, as described in the table below.

Default QR Code generated by the API

Configuring the QR code

You can generate your customised QR code, with your branding by using these parameters

ParameterDescriptionDefault Value
dataData that you would like to encode in the QR code.https://bishal.io
dotsColorHexadecimal color code for the dots in QR589c74
squaresColorHexadecimal color code for the corner squares in QR589c74
imageURL of the image to embed in QRnone
squaresTyperender type for squares in QR. (See options below)extra-rounded
dotsTyperender type for dots in QR. (See options below)classy

Possible values for squareType are string('dot' 'square' 'extra-rounded'), and possible values for dotsType are string('rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded').

You can pass in these parameters using query parameters in the URL, or using a request body as is common when integrating with code.

Using query params

curl "https://asia-east2-bishalspkt.cloudfunctions.net/qr-function-cf2a546?squaresColor=a23030&data=hi&image=https%3A%2F%2Fbishal.io%2Ffavicon.svg&dotsType=extra-rounded&squaresType=extra-rounded"

Stylized QR with an image

Using request body

Yon also pass these query parameters using request body.

export BASE_URL="https://asia-east2-bishalspkt.cloudfunctions.net/qr-function-cf2a546"
curl --location --request GET $BASE_URL \
--header 'Content-Type: application/json' \
--data '{
    "data": "Trolled ya",
    "image": "https://bishal.io/profile.png",
    "dotsType": "classy"
}'

Stylized QR with another image

The API is powered by Google Cloud Functions, using node-16 runtime. It uses [qr-code-styling-node](npm i qr-code-styling-node) package for generating QR codes.

Back to Blog
© 2024 Bishal Sapkota