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

Sep 7, 2023

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 URL	https://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

Parameter	Description	Default Value
`data`	Data that you would like to encode in the QR code.	`https://bishal.io`
`dotsColor`	Hexadecimal color code for the dots in QR	`589c74`
`squaresColor`	Hexadecimal color code for the corner squares in QR	`589c74`
`image`	URL of the image to embed in QR	`none`
`squaresType`	render type for squares in QR. (See options below)	`extra-rounded`
`dotsType`	render 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.