{"id":28306,"date":"2022-04-22T16:11:20","date_gmt":"2022-04-22T16:11:20","guid":{"rendered":"http:\/\/generate-qr-codes-with-cloudinary"},"modified":"2025-04-16T13:26:45","modified_gmt":"2025-04-16T20:26:45","slug":"generate-qr-codes-with-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/generate-qr-codes-with-cloudinary\/","title":{"rendered":"Generate QR Codes in JavaScript with Cloudinary"},"content":{"rendered":"

URLs are the way of the web, but whether you\u2019re 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\u2019t have an easy link to click.<\/p>\n

Instead we can take advantage of QR codes by easily generating them programmatically for whatever our need.<\/p>\n

Code on GitHub: https:\/\/github.com\/colbyfayock\/cloudinary-qr-generator<\/a><\/p>\n<\/div>\n\n

What do you need to get started?<\/h2>\n

For this walkthrough, you\u2019ll need to simply have a Cloudinary account, which you can get for free over at cloudinary.com<\/a>.<\/p>\n

We\u2019ll also be utilizing the Google Infographics API<\/a>, where the QR Code API is technically deprecated, but we can successfully use it to our advantage for generating QR codes.<\/p>\n

We\u2019ll also assume that we\u2019re working in a front end project, such as a React app, where we\u2019ll use a clientside library to generate our image.<\/p>\n

\n

Note: you can do similar things with serverside Cloudinary libraries as well!<\/p>\n<\/blockquote>\n

Installing & Configuring the Cloudinary URL Gen SDK<\/h2>\n

To get started, we need to configure our SDK to use in our project.<\/p>\n

We\u2019ll use the Cloudinary URL-Gen for JavaScript SDK<\/a>.<\/p>\n

First install the dependencies:<\/p>\n

yarn<\/span> add<\/span> @cloudinary<\/span>\/url-gen \n\n# or<\/span>\n\nnpm install @cloudinary\/url-gen\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Then import our new package:<\/p>\n
import<\/span> { Cloudinary } from<\/span> '@cloudinary\/url-gen'<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Finally we want to set up a new instance that we\u2019ll then use in our project.<\/p>\n
Add the following at the top of the file:<\/p>\n
const<\/span> cld = new<\/span> Cloudinary({\n  cloud<\/span>: {\n    cloudName<\/span>: '<Your Cloud Name>'<\/span>\n  },\n  url<\/span>: {\n    forceVersion<\/span>: false<\/span>\n  }\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Make sure to update your cloudName<\/code> value with your own Cloudinary Cloud Name.<\/p>\n
\n
Tip: you can find your Cloud Name on the Dashboard once logged in.<\/p>\n<\/blockquote>\n
You\u2019ll notice we\u2019re also using forceVersion: false<\/code>. We need to add this to avoid Cloudinary attempting to generate our image and store it before it\u2019s actually available, so when using our SDK (which by default adds a version), we\u2019ll simply exclude that version number.<\/p>\n
This is mostly important when you need to use a cache-busting mechanism when updating images regularly, which isn\u2019t our case anyways.<\/p>\n
Creating an auto-upload mapping in Cloudinary<\/h2>\n
In order to tell Cloudinary where we want it to fetch our QR code image, we need to specify an auto upload mapping.<\/p>\n
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.<\/p>\n
In our example, we can use:<\/p>\n