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

Author: Bishal Sapkota
Published: 2023-09-07
Canonical: https://bishal.io/blog/customised-qr-generator/

This project uses `qr-code-styling-node` to generate stylized QR codes through an API

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](https://asia-east2-bishalspkt.cloudfunctions.net/qr-function-cf2a546)
 
## 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
```bash
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](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)


### Using request body
Yon also pass these query parameters using request body.
```bash
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](https://asia-east2-bishalspkt.cloudfunctions.net/qr-function-cf2a546?dotsType=classy-rounded&data=Trolled%20ya&image=https%3A%2F%2Fbishal.io%2Fprofile.png)


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.