Creative Art QR Code Generator – ArtQRCode

Category: Javascript , Recommended | September 5, 2019

3 Comments

Demo Download

AUTHOR:	252860883
VIEWS TOTAL:	2,480 views
OFFICIAL PAGE:	Go to website
LAST UPDATE:	September 5, 2019
LICENSE:	MIT

---

Preview:

Description:

An art QR code generator that enables you to generate creative, gorgeous QR codes using your own materials.

How to use it:

Import the main JavaScript artqrcode.js into the document.

<script src="./artqrcode.js"></script>

Create a placeholder to place the generated QR code.

<div id="qrcode"></div>

Generate a QR code using default materials.

let qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "https://cssscript.com"
});

Set the size & position of the QR code.

let qrcode = new QRCode(document.getElementById("qrcode"), {
    width: 500,
    height: 500,
    codeWidth: 330,
    codeHeight: 330,
    top: 85,
    left: 85
});

Replace the default materials to create your own styles.

let qrcode = new QRCode(document.getElementById("qrcode"), {
    materials: {
      border: "./materials/border.png",
      eye: "./materials/eye.png",
      row4: "./materials/row4.png",
      col4: "./materials/col3.png",
      row2col3: "./materials/row2col3.png",
      row3col2: "./materials/row3col2.png",
      col3: ["./materials/col3.png", "./materials/col3_2.png"],
      row2col2: "./materials/row2col2.png",
      corner: "./materials/corner.png",
      row2: ["./materials/row2.png", "./materials/row2_2.png"],
      col2: "./materials/col2.png",
      single: ["./materials/single.png", "./materials/single_2.png"],
    }
});

All default configs to customize the art QR code.

let qrcode = new QRCode(document.getElementById("qrcode"), { 
    width: 256,
    height: 256,
    bgWidth: 256,
    bgHeight: 256,
    codeWidth:256,
    codeHeight:256,
    top: 0,
    left: 0,
    typeNumber: 4,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRErrorCorrectLevel.L,
    materials: {
      eye: "",
      row2col3: "",
      row3col2: "",
      row4: "",
      col4: "",
      row3: "",
      col3: "",
      row2col2: "",
      corner: "",
      col2: "",
      row2: "",
      single: ""
    }
});

Clear the QR code.

qrcode.clear();

Recreate the QR code.

qrcode.makeCode("New Content Here");

Execute a callback function after loaded.

function myCallBack(status) {
  console.log(status) // [loaded|success]
}

let qrcode = new QRCode(document.getElementById("qrcode"), {
    // options here
}, myCallBack);

Changelog:

09/05/2019

• support callback function