QRCode with JavaScript

#javascript #qrcode #html #tutorial

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.

<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.

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.