/qrcode-style

艺术二维码生成插件

Primary LanguageJavaScript

qrcode-style

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

安装方法

npm install qrcode-style --save

如果要使用 script 标签引入的形式，可以使用这个文件 qrcodeStyle.js

使用方法

  • 生成普通黑白二维码
new QRCode(dom: HTMLElement, options: Object, callback?: function);

option：

参数 说明
text 生成二维码的链接
width 二维码宽度
height 二维码高度
colorDark 二维码前景色
colorLight 二维码后景色
correctLevel 二维码容错级别（L: 低, M: 中, Q: 较高, H: 高）
src 中间 logo 图片路径
imgWidth logo 图片宽度
imgHeight logo 图片高度
  • 生成艺术二维码
qrcode.createStyle((qrcode: QRCode), (options: Object));

option：

参数 说明
canvasId 生成艺术二维码的容器 ID，需要是一个 canvas
grid 是否显示格子底色
eyeList 码眼素材
imgList 码字素材

eyeList 对象格式

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

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

{
    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，则不控制个数
            },
        ],
}

示例

// 生成普通二维码
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,
});