二维码生成器文档

转载：https://gerald.top/article/33/qrcanvas

https://github.com/gera2ld/qrcanvas/wiki

纯纯的Javascript版，不依赖任何第三方包（不依赖jQuery喔~），就可以轻松地生成二维码了，支持各种自定义，可以通过自定义颜色生成各种漂亮的、有个性的二维码。本站已支持使用此功能获取每个页面的二维码。

仅需要浏览器支持 canvas ，几乎所有现代浏览器都是支持的（而且本网站也仅支持现代浏览器）。

快来试试吧！

点此测试

安装

  

$ npm install qrcanvas

安装好以后可以得到3个文件：

• qrcanvas/dist/qrcanvas.js

  在浏览器上运行的完整版本。默认和推荐的版本。

• qrcanvas/dist/qrcanvas.slim.js

  在浏览器上运行的精简版本。这个版本不支持液态等特殊效果。

• qrcanvas/dist/qrcanvas.node.js

  在Node.js上运行的版本。此版本依赖 node-canvas 。

和框架一起使用：

• Vue.js 2: qrcanvas-vue
• React.js: qrcanvas-react

快速开始

<!-- HTML -->
<div id="qrcode"></div>

import qrcanvas from 'qrcanvas';

const canvas = qrcanvas({
  data: location.href
});
document.getElementById('qrcode').appendChild(canvas);

浏览器兼容

Firefox	Yes
Chrome	Yes
Internet Explorer	9+
Opera	12 [1] , 15+
Safari	Yes

[1]	Opera 12 (Presto) 的 canvas.arcTo 有问题，因此特效可能会不正常。

函数和方法

• function qrcanvas( options )

  生成一个二维码并画到 canvas 上。其中 options 是一个 object ，可以有以下属性（均可选）：

  属性	类型	默认值	描述
  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填充样式

 gera2ld / qrcanvas

 41  5

Generate characteristic qrcodes with a canvas. — Read More

https://gera2ld.github.io/qrcanvas/

Latest commit to the  master branch on 2-9-2017