二维码生成器文档

转载：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);

浏览器兼容

FirefoxYesChromeYesInternet Explorer9+Opera12 [1] , 15+SafariYes[1]Opera 12 (Presto) 的 canvas.arcTo 有问题，因此特效可能会不正常。

函数和方法

• function qrcanvas( options )

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

  属性类型默认值描述dataString''用于生成二维码的原始数据，字符串将使用UTF-8编码。cellSize [2]Number2每个小格的像素宽度或高度。size [2]NumberNone最终生成的图片的像素宽度或高度，如果指定了 cellSize 那么此项被忽略。typeNumberNumber [1..40]Auto二维码的 typeNumber ，如果太小将自动增加直到找到一个合适的 typeNumber 。correctLevelString {'L', 'M', 'Q', 'H'}'M'二维码的容错级别，如果指定了 logo 则设置为 H 。colorDark [3]Image | Canvas | String | Array'black'暗格的背景色。colorLight[3]Image | Canvas | String | Array'white'亮格的背景色。logoObject{}

  可以有以下属性（均可选）：

  若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 （建议使用）。
  effectObject{}

  可以有 key 和 value 属性。

  • effect.key = 'round'

    effect.value 在0-1之间，使小格有一个 value * cellSize 的 border-radius 。

  • effect.key = 'liquid'

    effect.value 在0-1之间，液态效果，即相邻的小格之间互相融合。

  reuseCanvasCanvasNone如果设置了 reuseCanvas ，最终的图片将绘制到这个canvas上。noAlphaBooleantrue是否去除图片的alpha通道。

返回 一个canvas。

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

colorDark 和 colorLight 都可以是一个图片（Image或者Canvas）、一个代表CSS颜色的字符串或者一个数组，数组中的元素可以有以下属性：

属性类型默认值描述colNumber使用 x起始列的indexrowNumber使用 y起始行的indexcolsNumber使用 width应用当前样式的列数rowsNumber使用 height应用当前样式的行数xNumber0起始位置的XyNumber0起始位置的YwidthNumber画布宽度应用当前样式的宽度heightNumber画布高度应用当前样式的高度styleString'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