简介

ArtQRCode是基于 qrcode.js 的封装，支持以图片元素为基本单元的二维码绘制。

github 地址：

https://github.com/252860883/ArtQRCode

github star: 235+

最新版本：开源项目未提供 ，未知

主要技术栈:

javascript

项目截图

功能

• 支持自定义二维码

想要生产出好看的二维码，图片素材必不可少。这需要设计师按照固定比例进行设计，具体素材命名以及规范如下：

配置见快速上手里的options 属性配置

本地查看效果

git clone https://github.com/252860883/ArtQRCode.git

然后整个项目当静态文件放到服务器上访问

快速上手

<div id="qrcode"></div>
<script>
    var options = {
        text: "https://github.com/252860883/ArtQRCode",
        width: 500,
        height: 500,
        codeWidth: 320,
        codeHeight: 320,
        top: 85,
        left: 80,
        /**
         * materials unit options
         */
        materials: {
            border: "./materials/electron/border.png",
            eye: "./materials/electron/eye.png",
            row4: "./materials/electron/row4.png",
            col4: "./materials/electron/col3.png",
            row2col3: "./materials/electron/row2col3.png",
            row3col2: "./materials/electron/row3col2.png",
            col3: ["./materials/electron/col3.png", "./materials/electron/col3_2.png"],
            row2col2: "./materials/electron/row2col2.png",
            corner: "./materials/electron/corner.png",
            row2: ["./materials/electron/row2.png", "./materials/electron/row2_2.png"],
            col2: "./materials/electron/col2.png",
            single: ["./materials/electron/single.png", "./materials/electron/single_2.png"],
        }
    }
   /**
    * when the artqrcode loaded, run this function
    */
    function callBack(status) {
        console.log(status) // [loaded|success]
    }
    var qrcode = new QRCode(document.getElementById("qrcode"), options, callBack);
</script>

浏览器兼容性

• IE / Edge

Edge小编测试可行

• Firefox

最新小编测试可行

• Chrome

最新小编测试可行

• Safari

最新小编测试可行

• Opera

项目未提供