QRCode with JavaScript
Tags: javascript, qrcode, html, tutorial
Published: 2021-11-25 16:33:25

[[Clique aqui para ler em português]](https://medium.com/walternascimentobarroso-pt/qrcode-com-javascript-9ff435f8879c)

Today, we use QRCode for everything, and it makes it very easy for us to share small information, so we are now going to use a js lib, to show how simple and easy it is to create a QRCode with javascript.

## Code

First let’s create the interface, we’ll do something simple, using just HTML.

```HTML
<h1>Gerar QRcode</h1>
<input type="text" id="text">
<input type="text" id="width" value="256">
<input type="text" id="height" value="256">
<input type="color" id="dark" value="#000000">
<input type="color" id="light" value="#ffffff">
<button id="generate">Gerar</button>
<a id="download" style="display: none;">Download</a>
<div id="qrcode"></div>

<script src="https://cdn.jsdelivr.net/npm/davidshimjs-qrcodejs@0.0.2/qrcode.min.js"></script>
```

In this first part, we have data entries such as height, width and colors, we also have a button to download our QRCode a div that will display the qrcode and finally we have the script tag that loads the davidshimjs library today there are already several libraries, but this is the one that I found the simplest to demonstrate the use, but you can use the library that you like best.

```JavaScript
const qrcodeEl = document.querySelector('#qrcode');
const textEl = document.querySelector('#text');
const generateEl = document.querySelector('#generate');
const widthEl = document.querySelector('#width');
const heightEl = document.querySelector('#height');
const darkEl = document.querySelector('#dark');
const lightEl = document.querySelector('#light');
const downloadEl = document.querySelector('#download');

generateEl.addEventListener('click', generate);

function generate() {
  qrcodeEl.innerHTML = ``;
  new QRCode(qrcodeEl, {
    text: textEl.value,
    width: widthEl.value,
    height: heightEl.value,
    colorDark: darkEl.value,
    colorLight: lightEl.value
  });

  download();
}

function download() {
  const canvasEl = qrcodeEl.querySelector('canvas');
  let data = canvasEl.toDataURL('image/png');

  downloadEl.setAttribute('href', data);
  downloadEl.setAttribute('download', 'qrcode.png');
  downloadEl.style.display = 'inline-block';
}
```

In our javascript code. first we take all screen elements (height, width, colors, etc) and then we add the **click** event to our **Gerar** button and call the **generate** function

In the **generate** function we first take the element where the qrcode is and we make ``qrcodeEl.innerHTML = ` `;`` that way whenever we generate a new qrcode the old one will be removed from the screen. then we instantiate the **QRCode** passing all the necessary parameters (height, width, colors, etc.) and finally we call the **download** function

In the **download** function we look for the canvas element that is generated by the **QRCode** library and inside it we get the data (image). with that we add the value captured in the download link and define the **download** attribute and change the style so that it is displayed on the screen.

Now whenever a new **QRCode** is generated the download link will be displayed so that you can download the qrcode as an image

ready simple like that.

## Demo

See below for the complete working project.

{% codepen https://codepen.io/WalterNascimento/pen/zYNPNLe %}

_if you can't see it [click here](https://codepen.io/WalterNascimento/pen/zYNPNLe) and see the final result_

## Youtube

If you prefer to watch it, see the development on youtube.

{% youtube -1Q_VBkZa6w %}

***

## Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

***

## Support Me

[Youtube - WalterNascimentoBarroso](https://www.youtube.com/channel/UCXm0xRtDRrdnvkW24WmkBqA)
[Github - WalterNascimentoBarroso](https://github.com/walternascimentobarroso)
[Codepen - WalterNascimentoBarroso](https://codepen.io)