Mit einem QR-Code kann man Informationen wie URLs, Kontaktdaten oder Text verschlüsseln und auf Papier oder digitalen Medien darstellen, um sie schnell und einfach mit Smartphones oder anderen QR-Code-Scannern zu erfassen und zu nutzen. Dies ermöglicht beispielsweise den Zugriff auf Webseiten, das Teilen von Kontaktdaten, das Verbinden mit WLAN-Netzwerken und vieles mehr, was das Teilen und Abrufen von Informationen bequemer gestaltet.

QR Code Generator Code:
 
 <script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
  
  <script>
    async function updateQRCode() {
      const width = document.querySelector('#width').value;
      const height = document.querySelector('#height').value;
      const data = document.querySelector('#data-input').value;
      const logoFile = document.querySelector('#logo-src-input').files[0];
      const size = parseInt(document.querySelector('#size-input').value);
      const canvas = document.querySelector('#qr-code');

      if (typeof data !== "undefined") {
        await QRCode.toCanvas(canvas, data, { width: size });
        if (logoFile) {
          const imgDim = { width: width, height: height }; // logo dimension
          const context = canvas.getContext('2d');
          const imageObj = new Image();
          imageObj.src = URL.createObjectURL(logoFile);
          imageObj.onload = function () {
            context.drawImage(
              imageObj,
              canvas.width / 2 - imgDim.width / 2,
              canvas.height / 2 - imgDim.height / 2,
              imgDim.width,
              imgDim.height
            );
          };
        }
        
        const element = document.querySelector(".side_by_side");
        if (size > 350) {
          const currentProperties = window.getComputedStyle(element);
          const displayProperty = currentProperties.getPropertyValue("display");
          if (displayProperty === "flex") {
            element.style.display = "inline-block";
          }
        }
      } else {
        const textarea = document.querySelector("textarea");
        textarea.textContent = "Hello World!";
      }
    }
    
  </script>
    <div class="center">
      <canvas width="0" height="0" class="qrcode" id="qr-code"></canvas>
    </div>
        <div style="padding: 10px;">
          <table>
            <tr>
              <td>
                <label for="data-input">QR Code Inhalt:</label>
                <textarea cols="60" id="data-input" name="data-input">www.test.org</textarea>
              </td>
            </tr>
            <tr>
              <td>
                <label for="size-input">QR-Code Größe:</label>
                <input type="number" id="size-input" name="size-input" oninput="this.value = Math.min(this.value, 650);" value="300">
              </td>
            </tr>
            <tr>
              <td>
                <label for="logo-src-input">Logo auswählen</label>
                <input type="file" id="logo-src-input" name="logo-src-input" accept="image/*">
              </td>
            </tr>
            <tr>
              <td>
                <label for="width">Logo Breite:</label>
                <input type="number" id="width" name="width" oninput="this.value = Math.min(this.value, 650);" value="50">
              </td>
            </tr>
            <tr>
              <td>
                <label for="height">Logo Höhe:</label>
                <input type="number" id="height" name="height" oninput="this.value = Math.min(this.value, 650);" value="50">
              </td>
            </tr>
          </table>
  <br>
        <div class="center">
          <button onclick="updateQRCode()">QR Code erstellen</button><br><br>
        </div>
        <br>
        </div>