Generate QR Codes in JavaScript with Cloudinary

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.

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!

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:

yarn add @cloudinary/url-gen 

# or

npm install @cloudinary/url-gen
Code language: CSS (css)

Then import our new package:

import { Cloudinary } from '@cloudinary/url-gen';
Code language: JavaScript (javascript)

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:

const cld = new Cloudinary({
  cloud: {
    cloudName: '<Your Cloud Name>'
  },
  url: {
    forceVersion: false
  }
});
Code language: JavaScript (javascript)

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.

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:

https://res.cloudinary.com/<Cloud Name>/image/upload/<Folder>/<Remote Source>
Code language: HTML, XML (xml)

Cloudinary will attempt to fetch our image from:

https://chart.apis.google.com/chart?cht=qr&chs=500x500&chld=H%7C0&chl=<Remote Source>
Code language: HTML, XML (xml)

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.

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

First we want to create our base image:

const url = cld.image(`<Mapped Folder>/<Remote URL>`).toURL();
Code language: HTML, XML (xml)

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!

https://res.cloudinary.com/colbycloud-mediajams/image/upload/mediajams/qr/https://spacejelly.dev?_a=ATAK9WI0
Code language: JavaScript (javascript)

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:

.effect('e_vectorize:detail:1.0')
Code language: JavaScript (javascript)

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:

.format('svg')
Code language: JavaScript (javascript)

Where our final code should look like:

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

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!

https://res.cloudinary.com/colbycloud-mediajams/image/upload/e_vectorize:detail:1.0/f_svg/mediajams/qr/https://spacejelly.dev?_a=ATAK9WI0
Code language: JavaScript (javascript)

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!