记vue生成二维码
纯纯的Javascript版,不依赖任何第三方包,就可以轻松地生成二维码了,支持各种自定义,可以通过自定义颜色生成各种漂亮的、有个性的二维码。1:npm安装$ npm install qrcanvas2. 在用的页面引入import { qrcanvas } from 'qrcanvas';3:html (tepmlate)<div id="qrcode" >...
·
纯纯的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)
|
最后实现效果
更多推荐
已为社区贡献2条内容
所有评论(0)