Creative Art QR Code Generator – ArtQRCode

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

For QR codes that include image overlays and background customization, try this QR code generator with image and background support.

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