QR Generation

by Viet27th

HTML

<script type="text/javascript" src="https://unpkg.com/[email protected]/lib/qr-code-styling.js"></script>

 <button id="download-btn" style="margin-bottom: 30px;">Download PNG</button>
 <div id="canvas"></div>

CSS

body {
  background-color: black;
}

#canvas canvas {
  width: 300px;
}

JavaScript

const qrColor = "#FFF";
const qrCode = new QRCodeStyling({
  width: 2100,
  height: 2100,
  type: "canvas", // canvas or svg
  data: "https://www.facebook.com/amthucvinha",
  image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
  "backgroundOptions": {
    "color": "transparent"
  },
  "qrOptions": {
    "typeNumber": "0",
    "mode": "Byte",
    "errorCorrectionLevel": "Q"
  },
  "imageOptions": {
    "crossOrigin": "anonymous", // Important. Nếu không có thì không download được.
    "saveAsBlob": true,
    "hideBackgroundDots": true,
    "imageSize": 0.4,
    "margin": 25
  },
  // Chấm tròn nhỏ
  "dotsOptions": {
    "type": "dots",
    "color": qrColor,
    "roundSize": true,
    "gradient": null
  },
  // Các góc
  "cornersSquareOptions": {
    "type": "extra-rounded",
    "color": qrColor,
    "gradient": null
  },
  // Hình phía trong các góc
  "cornersDotOptions": {
    "type": "dot",
    "color": qrColor
  }
});



qrCode.append(document.getElementById("canvas"));
document.getElementById("download-btn").addEventListener("click", () => {
  qrCode.download({ name: "qr", extension: "png" }); // png or svg
});