Home

QR Code Maker

🧾 QR Code Generator

<style>
  label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
  }
  input, textarea, select {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
  }
  #qrcode {
    margin-top: 20px;
    text-align: center;
  }
  canvas, svg {
    border-radius: 20px;
  }
  .slider-group {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .slider-group input[type="range"] {
    flex: 1;
  }
  .slider-group input[type="number"] {
    width: 60px;
  }
</style>

<h2>🧾 QR Code Generator</h2>

<label>Text:</label>
<textarea id="text" rows="4" placeholder="Enter text or URL..."></textarea>

<label>Size (px):</label>
<div class="slider-group">
  <input type="range" id="size" min="100" max="600" value="300" oninput="sizeOut.value=this.value">
  <input type="number" id="sizeOut" value="300" oninput="size.value=this.value">
</div>

<label>Margin (modules):</label>
<div class="slider-group">
  <input type="range" id="margin" min="0" max="20" value="4" oninput="marginOut.value=this.value">
  <input type="number" id="marginOut" value="4" oninput="margin.value=this.value">
</div>

<label>Foreground Color:</label>
<input type="color" id="fgColor" value="#000000">

<label>Background Color:</label>
<input type="color" id="bgColor" value="#ffffff">

<label>Logo (optional):</label>
<input type="file" id="logo" accept="image/png, image/svg+xml">

<label>Format:</label>
<select id="format">
  <option value="png">PNG</option>
  <option value="svg">SVG</option>
</select>

<button class="button" onclick="generateQRCode()">🚀 Create QR Code</button>

<div id="qrcode" class="center"></div>
<div style="text-align: center; margin-top: 10px;">
  <button id="downloadBtn" style="display:none;">⬇️ Download</button>
</div>

<!-- QRCode.js library -->
<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>

<script>
  let qr;

  function generateQRCode() {
    const text = document.getElementById("text").value;
    const size = parseInt(document.getElementById("size").value);
    const margin = parseInt(document.getElementById("margin").value);
    const fgColor = document.getElementById("fgColor").value;
    const bgColor = document.getElementById("bgColor").value;
    const format = document.getElementById("format").value;

    const qrDiv = document.getElementById("qrcode");
    qrDiv.innerHTML = "";

    qr = new QRCode(qrcode, {
      text: text,
      width: size,
      height: size,
      colorDark: fgColor,
      colorLight: bgColor,
      correctLevel: QRCode.CorrectLevel.H
    });

    setTimeout(() => {
      const fileInput = document.getElementById("logo");
      if (fileInput.files.length > 0) {
        const file = fileInput.files[0];
        const reader = new FileReader();
        reader.onload = function (e) {
          const logo = new Image();
          logo.src = e.target.result;
          logo.onload = () => {
            const canvas = qrDiv.querySelector("canvas");
            const ctx = canvas.getContext("2d");
            const imgSize = size * 0.2;
            const x = (canvas.width - imgSize) / 2;
            const y = (canvas.height - imgSize) / 2;

            ctx.save();
            ctx.beginPath();
            ctx.arc(x + imgSize / 2, y + imgSize / 2, imgSize / 2, 0, 2 * Math.PI);
            ctx.clip();
            ctx.drawImage(logo, x, y, imgSize, imgSize);
            ctx.restore();
          };
        };
        reader.readAsDataURL(file);
      }

      document.getElementById("downloadBtn").style.display = "inline-block";
    }, 500);
  }

  document.getElementById("downloadBtn").onclick = function () {
    const format = document.getElementById("format").value;
    const canvas = document.querySelector("#qrcode canvas");

    if (!canvas) return alert("Generate QR first!");

    const link = document.createElement("a");
    if (format === "png") {
      link.href = canvas.toDataURL("image/png");
      link.download = "qrcode.png";
    } else if (format === "svg") {
      alert("SVG export không hỗ trợ trong phiên bản QRCode.js này.\nBạn có thể dùng mã SVG từ thư viện khác.");
      return;
    }
    link.click();
  };
</script>

Info!
To receive the code, please leave your email address in the comment section below and I will send the template to you via email as soon as possible.

People don't have to become experts to share. In the process of sharing, they become experts.

Anonymous

Post a Comment