纯纯的Javascript版，不依赖任何第三方包，就可以轻松地生成二维码了，支持各种自定义，可以通过自定义颜色生成各种漂亮的、有个性的二维码。

1:npm安装

$ npm install qrcanvas

2. 在用的页面引入

import { qrcanvas } from 'qrcanvas';

3:html (tepmlate)

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

4:script

浏览器兼容

函数和方法

• 属性	类型	默认值	描述
  data	String	''	用于生成二维码的原始数据，字符串将使用UTF-8编码。
  cellSize [2]	Number	2	每个小格的像素宽度或高度。
  size [2]	Number	None	最终生成的图片的像素宽度或高度，如果指定了 cellSize 那么此项被忽略。
  typeNumber	Number [1..40]	Auto	二维码的 typeNumber ，如果太小将自动增加直到找到一个合适的 typeNumber 。
  correctLevel	String {'L', 'M', 'Q', 'H'}	'M'	二维码的容错级别，如果指定了 logo 则设置为 H 。
  colorDark [3]	Image | Canvas | String | Array	'black'	暗格的背景色。
  colorLight[3]	Image | Canvas | String | Array	'white'	亮格的背景色。
  logo	Object	{}	可以有以下属性（均可选）： 若logo是图片： image ：一个 Image 元素，用于传递将要画到二维码中的图片。 若logo是文本： text ：将要画成Logo的文本。 color ：Logo文本的颜色，默认是 black 。 fontStyle ：Logo文本的样式，如 italic bold 。 fontFamily ：Logo文本的字体，默认是 Cursive 。 共同属性： clearEdges ：一个Number，指定Logo周围被破坏的小格的清理级别，默认为 0 。 margin ：图片及周围小格之间的像素间距，默认为 2 。 size ：一个float，表示Logo占二维码总面积的比例，默认是 .15 （建议使用）。
  effect	Object	{}	可以有 key 和 value 属性。 effect.key = 'round' effect.value 在0-1之间，使小格有一个 value * cellSize 的 border-radius 。 effect.key = 'liquid' effect.value 在0-1之间，液态效果，即相邻的小格之间互相融合。
  reuseCanvas	Canvas	None	如果设置了 reuseCanvas ，最终的图片将绘制到这个canvas上。
  noAlpha	Boolean	true	是否去除图片的alpha通道。

返回 一个canvas。

[2]	(1, 2) 建议使用 cellSize 而非 size ，因为当计算出的 cellSize 不是整数时，最后的图像可能因为被拉伸而变模糊。

[3]

(1, 2) colorDark 和 colorLight 都可以是一个图片（Image或者Canvas）、一个代表CSS颜色的字符串或者一个数组，数组中的元素可以有以下属性： 属性 类型 默认值 描述 col Number 使用 x 起始列的index row Number 使用 y 起始行的index cols Number 使用 width 应用当前样式的列数 rows Number 使用 height 应用当前样式的行数 x Number 0 起始位置的X y Number 0 起始位置的Y width Number 画布宽度 应用当前样式的宽度 height Number 画布高度 应用当前样式的高度 style String 'black' 通过其他属性指定的区域将要应用的CSS填充样式

最后实现效果