https://github.com/litten/Kael-Qrcode

二维码生成库，基于canvas，灵活轻巧，美观多变。
https://github.com/litten/Kael-Qrcode

Last synced: 2 months ago
JSON representation

二维码生成库，基于canvas，灵活轻巧，美观多变。

• Host: GitHub
• URL: https://github.com/litten/Kael-Qrcode
• Owner: litten
• Created: 2014-08-09T18:19:59.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-08-10T15:49:55.000Z (over 10 years ago)
• Last Synced: 2024-08-03T09:11:26.560Z (6 months ago)
• Language: JavaScript
• Size: 172 KB
• Stars: 110
• Watchers: 10
• Forks: 36
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-github-star - Kael-Qrcode

README

        
#Kael-Qrcode 

> 基于html5 canvas，灵活轻巧，美观多变的二维码生成库                   

取名卡尔，缘由dota英雄Kael；一生二，二生三，三生万物 … 简单地配置Kael-Qrcode，帮助你变换出无穷样式的二维码。           

### 使用 Usage:

**1、入手**

Demo Base - 基本

```js

	var kaelBase = new KaelQrcode();

	kaelBase.init(document.getElementById("qr-base"), "hello KaelQrcode");

```

**2、进阶**

随手可配，变化无穷！           

**Demo Pic - “有图有真相”**

关键词：附图，图片边框，尺寸            

![demo](http://littendomo.sinaapp.com/kaer-qrcode/qrcode-pic.jpg)

```js

	var kaelPic = new KaelQrcode();

	kaelBase.init(document.getElementById("qr-pic"), {

		text : "hello KaelQrcode",

		size: 300,

		img: {

			src : "kael-ico.jpg",

			border: "#fff"

		}

	});

```

**Demo Sae - “如果大海能够带走我的哀愁”**        

关键词：圆角，前景色，背景色，渐变           

![demo](http://littendomo.sinaapp.com/kaer-qrcode/qrcode-sea.jpg)

```js

	var kaelSea = new KaelQrcode();

	kaelSea.init(document.getElementById("qr-sea"), {

		text : "hello KaelQrcode",

		size: 300,

		color: {

			'0': 'rgb(1, 158, 213)',

			'0.2': 'rgb(30, 169, 224)',

			'0.6': 'rgb(0, 120, 191)',

			'1': 'rgb(1, 119, 255)'

		},

		background: "#d3e3f0",

		type: "round"

	});

```

**Demo Iron - “钢铁是怎样炼成的”**     

关键词：阴影            

![demo](http://littendomo.sinaapp.com/kaer-qrcode/qrcode-iron.jpg)

```js

	var kaelIron = new KaelQrcode();

	kaelIron.init(document.getElementById("qr-iron"), {

		text : "hello KaelQrcode",

		size: 300,

		color: {

			'0': 'rgb(30, 30, 30)',

			'0.2': 'rgb(100, 100, 100)',

			'1': 'rgb(40, 40, 40)'

		},

		background: {

			'0': 'rgb(233, 233, 233)',

			'0.2': 'rgb(246, 246, 246)',

			'1': 'rgb(212, 212, 212)'

		},

		shadow: true

	});

```

**Demo Iron - “万紫千红总是春”**      

关键词：单点        

![demo](http://littendomo.sinaapp.com/kaer-qrcode/qrcode-point.jpg)

```js

	var kaelPoint = new KaelQrcode();

	kaelPoint.init(document.getElementById("qr-point"), {

		text : "hello KaelQrcode",

		size: 300,

		color: "#50528f",

		background: "e7e0cf",

		pointColor: "#ee256c",

		type: "round"

	});

```

### 展示 Show:

demo尚未完成…请查看example文件夹内文件

### 正在做 Todo：

1. 阴影效果优化

2. 高光

3. 正方形识别

4. 动画