Generate QR Code With JavaScript

June 27, 2023 by Andreas Wik

Generate QR code JavaScript

There are numerous JavaScript libraries out there for generating QR codes. Let’s take a look at one of them; qrcode.js.

It’s very straightforward, and while it gives you quite a few options you can tinker with, simply generating a QR with default settings is just one line of code.

First, let’s grab qrcode.js from cdnjs.

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

 

Now, we create our QRcode object, passing it the ID of the element where you want it to be created, in this case qr-result.

const myQrCode = new QRCode("qr-result");

 

All we need to do to generate a QR code is to call makeCode(), passing the URL of our choice to it.

myQrCode.makeCode(url);

 

There are a number of options you can also tinker with. As you can see in the CodePen below, I have set the two colors to be used for the QR codes; colorDark and colorLight. I have also set the width and height to 200 px.

const myQrCode = new QRCode("qr-result", {
    width: 200,
    height: 200,
    colorDark : "#000000",
    colorLight : "#ffffe3"
});

 

See the Pen Untitled by Andreas Wik (@andreaswik) on CodePen.

Share this article

Recommended articles

@awikio