Generate QR Codes in JavaScript with Cloudinary

Colby Fayock

URLs are the way of the web, but whether you're trying to stuff some extra query parameters to control the experience or simply have a long domain name, those URLs can be long to enter manually when you don't have an easy link to click.

Instead we can take advantage of QR codes by easily generating them programmatically for whatever our need.

What do you need to get started?

For this walkthrough, you'll need to simply have a Cloudinary account, which you can get for free over at cloudinary.com.

We'll also be utilizing the Google Infographics API, where the QR Code API is technically deprecated, but we can successfully use it to our advantage for generating QR codes.

We'll also assume that we're working in a front end project, such as a React app, where we'll use a clientside library to generate our image.

Note: you can do similar things with serverside Cloudinary libraries as well!

Installing & Configuring the Cloudinary URL Gen SDK

To get started, we need to configure our SDK to use in our project.

We'll use the Cloudinary URL-Gen for JavaScript SDK.

First install the dependencies:

1yarn add @cloudinary/url-gen
2
3# or
4
5npm install @cloudinary/url-gen

Then import our new package:

1import { Cloudinary } from '@cloudinary/url-gen';

Finally we want to set up a new instance that we'll then use in our project.

Add the following at the top of the file:

1const cld = new Cloudinary({
2 cloud: {
3 cloudName: '<Your Cloud Name>'
4 },
5 url: {
6 forceVersion: false
7 }
8});

Make sure to update your cloudName value with your own Cloudinary Cloud Name.

Tip: you can find your Cloud Name on the Dashboard once logged in.

You'll notice we're also using forceVersion: false. We need to add this to avoid Cloudinary attempting to generate our image and store it before it's actually available, so when using our SDK (which by default adds a version), we'll simply exclude that version number.

This is mostly important when you need to use a cache-busting mechanism when updating images regularly, which isn't our case anyways.

Creating an auto-upload mapping in Cloudinary

In order to tell Cloudinary where we want it to fetch our QR code image, we need to specify an auto upload mapping.

By using this feature, we can simply specify a folder prefix for our asset and automatically have Cloudinary use our URL prefix when attempting to request a remote image.

In our example, we can use:

  • Folder: qr (or whatever you want)
  • URL Prefix: [https://chart.apis.google.com/chart?cht=qr&chs=500x500&chld=H%7C0&chl=](https://chart.apis.google.com/chart?cht=qr&chs=500x500&chld=H%7C0&chl=)

You can find this configuration and add a new mapping under Settings > Upload > Auto upload mapping.

When requesting our URL, such as:

1https://res.cloudinary.com/<Cloud Name>/image/upload/<Folder>/<Remote Source>

Cloudinary will attempt to fetch our image from:

1https://chart.apis.google.com/chart?cht=qr&chs=500x500&chld=H%7C0&chl=<Remote Source>

Then deliver it from its CDN, in addition to us now having the ability to do whatever we want with the media asset, such as transformations and effects.

Generating a Cloudinary URL

Now we can get to the fun part and generate our image URL with the SDK.

First we want to create our base image:

1const url = cld.image(`<Mapped Folder>/<Remote URL>`).toURL();

Here we're using the image method along with passing in the location of our image to generate a Cloudinary image instance, which we then transform to a URL.

We want to change our Mapped Folder value in our invocation to the folder we specified in our auto upload settings. We then want to replace Remote URL value to the location of where we want our QR code to go to.

Now if we try to inspect the value of url we'll see a Cloudinary URL which now returns a QR code image when loaded!

1https://res.cloudinary.com/colbycloud-mediajams/image/upload/mediajams/qr/https://spacejelly.dev?_a=ATAK9WI0

Vectorizing & turning a QR code to an SVG file

One particular benefit of the Cloudinary pipeline is our ability to now use the vectorize effect along with the format change feature to turn our new QR code into an SVG.

To do this, we can now start to chain our effect and transformation to our URL generation.

First, before our toURL() method, add:

1.effect('e_vectorize:detail:1.0')

We're using the e_vectorize effect as well as providing a configuration to include a high level of detail to make sure we're getting accurate results.

Then we can turn it into an SVG with:

1.format('svg')

Where our final code should look like:

1const url = cld.image(`<Mapped Folder>/<Remote URL>`).effect('e_vectorize:detail:1.0').format('svg').toURL();

Now if we load our image, we can see that Cloudinary returns an SVG file that gives us the ability to resize it to whatever size we want!

1https://res.cloudinary.com/colbycloud-mediajams/image/upload/e_vectorize:detail:1.0/f_svg/mediajams/qr/https://spacejelly.dev?_a=ATAK9WI0

What more can we do?

Given we now have the ability to do whatever want inside of Cloudinary, we have a wide range of features we can take advantage.

We can use color replacement features to make the QR codes the exact color we want.

Or add image overlays for highly custom QR codes!

Colby Fayock

Sr Dev Experience Engineer @ Cloudinary

Astrocoder, Dev Experience Engineer, Space Jelly Commander—I help others get the tech out of the way to solve real problems with the tools of the web. I work with the dev community at Cloudinary and am a prolific creator of educational content around the web teaching others through learning by doing one Star Wars plush cuddle at a time.