qrcode-style

KO | EN

gitlite — search

#python #go #android #rust #deep-learning #linux #nodejs #awesome #cli #awesome-list #pytorch #ios #mcp #open-source

(★ 8)

艺术二维码生成插件

qrcode-style 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# qrcode-style

基于 fabric.js 的艺术二维码生成插件，可以使用图片素材自定义二维码样式。

![](https://raw.githubusercontent.com/coderhsw/qrcode-style/master/image/qrcode.png '例子')

### 安装方法

```
npm install qrcode-style --save
```

如果要使用 script 标签引入的形式，可以使用这个文件 [qrcodeStyle.js](https://github.com/coderhsw/qrcode-style/blob/master/dist/qrcodeStyle.js)

### 使用方法

-   生成普通黑白二维码

```js
new QRCode(dom: HTMLElement, options: Object, callback?: function);
```

-   生成艺术二维码

```js
qrcode.createStyle((qrcode: QRCode), (options: Object));
```

**eyeList 对象格式**

```js
{
    type: 'eye',
    eye1: {
        url: '', // 素材路径
        options: {
            name: '',   // 素材标识
            opacity: 1, // 素材透明度，控制显示隐藏
            type: '',   // 素材类型 png | jpg | svg
        },
    },
    eye2: {
        // 同上...
    }
    eye3: {
        // 同上...
    }
}
```

**imgList 对象格式** </br>
目前支持的素材类型有：2 : 3，3 : 2，3 : 1，4 : 1，2 : 2，1 : 2，1 : 1

```js
{
    type: 'img',
    row2col3: [],
    row3col2: [],
    row3: [],
    row4: [],
    row2col2: [],
    corner: [],     // 2:2特殊款，右下角镂空
    col2: [],
    single: [
            {
                url: '',    //素材路径
                options: {
                    name: 'single-0',   // 素材标识
                    opacity: 1,     // 素材透明度，控制显示隐藏
                    type: 'png',    // 素材类型 png | jpg | svg
                },
                limit: Infinity,    // 数量上限，默认Infinity
                count: 0,           // 数量控制，默认为0，则不控制个数
            },
        ],
}
```

### 示例

```js
// 生成普通二维码
var qrcode = new QRCode(document.getElementById('qrcode'), {
	text: 'https://xxx.com/',
	width: 500,
	height: 500,
	colorDark: '#000000',
	colorLight: '#ffffff',
	correctLevel: QRCode.CorrectLevel.H,
});

// 素材列表（码眼）
var eyeList = {
	type: 'eye',
	eye1: {
		url: './image/eye1.png',
		options: {
			name: 'eye1',
			opacity: 1,
			type: 'png',
		},
	},
	eye2: {
		url: './image/eye1.png',
		options: {
			name: 'eye2',
			opacity: 1,
			type: 'png',
		},
	},
	eye3: {
		url: './image/eye1.png',
		options: {
			name: 'eye3',
			opacity: 1,
			type: 'png',
		},
	},
};
// 素材列表（码字）
var imgList = {
	type: 'img',
	list: {
		row2col3: [],
		row3col2: [],
		row3: [],
		row4: [],
		row2col2: [],
		corner: [],
		col2: [
			{
				url: './image/col2.png',
				options: {
					name: 'col2-0',
					opacity: 1,
					type: 'png',
				},
				limit: Infinity,
				count: 0,
			},
			{
				url: './image/col2-1.png',
				options: {
					name: 'col2-1',
					opacity: 1,
					type: 'png',
				},
				limit: Infinity,
				count: 0,
			},
		],
		single: [
			{
				url: './image/single.png',
				options: {
					name: 'single-0',
					opacity: 1,
					type: 'png',
				},
				limit: Infinity,
				count: 0,
			},
		],
	},
};

qrcode.createStyle(qrcode, {
	eyeList,
	imgList,
	canvasId: 'canvas',
	grid: true,
});
```

qrcode-style

qrcode-style 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

qrcode-style

qrcode-style 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README