基于 QRCode.js实现生成艺术二维码

首先放一张项目的效果图

项目效果图

通过生成器生成的艺术二维码团案

功能

功能上，很简单，就是首先上传一个二维码图片（这个功能还么有实现，稍等），或者直接输入链接地址或文字，点击生成就会生成二维码图片了哦。

原理

二维码的本质是啥呢？

通俗讲，就是一个二维数组，通过位运算生成一个只包含 0 1 的二维数组，在生成图片过程中进行遍历，1的位置绘制黑色块，0 的位置绘制白色块。

那艺术二维码又是怎么生成的呢？

将对应的黑色块替换成彩色的图案，利用 canvas.drawImage()来实现填充。当然啦,单纯的绘制一种图案貌似并不能称作艺术二维码吧？这里，我在遍历的同时进行了判断，比如当连着两个数是 1 的时候可以绘制一个长方形的团案等等。如果判断的精确性越高，那绘制出来的图案就会越精细。这是其中一款二维码的素材文件包：

对应的位置会绘制相应的图案

在代码中的实现:

项目是用 VUE全家桶写的，所以在使用的时候还需要大家针对自己情况修改啦。写的比较仓促，后面还会继续完善，本人前端小白，第一次写，写的也不是很好，如果有什么问题可以再交流！

github地址:艺术二维码合成github地址

如果能帮到你，记得給颗星哦~