Creative Art QR Code Generator – ArtQRCode

Category: Javascript , Recommended | September 5, 2019
Views Total:8,071 views
Official Page:Go to website
Last Update:September 5, 2019


Creative Art QR Code Generator – ArtQRCode


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: ""

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,
    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.


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);



  • support callback function

You Might Be Interested In:

3 thoughts on “Creative Art QR Code Generator – ArtQRCode

  1. hussi

    it says
    Firefox Monitor: malformed breach entry.
    {“Name”:”PDL”,”Domain”:””,”schema”:1576803007814,”PwnCount”:622161052,”AddedDate”:”2019-11-22T20:13:04Z”,”BreachDate”:”2019-10-16″,”DataClasses”:[“Email addresses”,”Employers”,”Geographic locations”,”Job titles”,”Names”,”Phone numbers”,”Social media profiles”],”id”:”0344be15-c2c2-4072-bf28-18de0ae8c10f”,”last_modified”:1578325494347,”_status”:”synced”}

  2. hussi

    can you please make it a react component or importable function to be used in react or saved as variable
    plz inform me if you did


Leave a Reply