QR Code 產生器

此套件來自於此官方網頁，覺得還不錯，可透過以下幾個基本的參數設定，按下「產生 QR Code」按鈕之後，右邊的區域即會產生 QR Code，按下「下載 QR Code」按鈕，即可下載 QR Code 的圖檔。

當然還有更多細項的設定，可以直接參考官方說明文件。

參數設定

寬度

高度

網址

圖片 logo 網址

另一個圖片 logo 的測試網址：

https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg

QR Code 預覽

基本套用方式

載入以下原始碼：

若要產生 QR Code，則執行以下程式，註解的地方需替換成欄位的資料：

let qrCode;
qrCode = new QRCodeStyling({
  width: $("#qr_width").val(),   // 寬度
  height: $("#qr_height").val(), // 高度
  type: "svg",
  data: $("#qr_data").val(),     // 網址資料
  image: $("#qr_img").val(),     // logo 網址
  dotsOptions: {
    color: "black",
    type: "rounded"
  },
  backgroundOptions: {
    color: "white",
  },
  imageOptions: {
    crossOrigin: "anonymous",
    margin: 15
  }
});

let div_block = document.getElementById("div_block");
qrCode.append(div_block);

若要下載 QR Code 圖檔，則執行以下程式：

qrCode.download({ name: "qrcode", extension: "png" });