Generate QR Code With JavaScript
June 27, 2023 by Andreas Wik
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
