使用kjua生成二维码

官网：https://larsjung.de/kju

使用方法

在官网下载js文件，在页面中引用即可，原生js实现，不需要引用其他依赖。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="test">
			
		</div>
		<script src="kjua-0.9.0.min.js"></script>
		<script>
            // text:二维码内容
			var el = kjua({text: 'http://www.baidu.com'});
			document.querySelector('#test').appendChild(el);
		</script>
	</body>
</html>

效果如下：

原生js生成二维码_js中怎么获取二维码信息

也可用jQuery方式生成（需要引入jQuery）。

$('#test').kjua({text: 'http://www.baidu.com'});

当然也可以在二维码中间加入图片logo或文字，下面是所有可选参数（不必设置所有参数，设置需要的即可）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#img-buffer {
			    display: none;
			}
		</style>
	</head>
	<body>
		<div id="test">
			
		</div>
		<!-- 用于保存二维码中间图片 -->
		<img src="icon5.png" id="img-buffer">
		<script src="kjua-0.9.0.min.js"></script>
		<script>
			// 二维码中间的图片
			var img=window.document.getElementById("img-buffer")
			var el = kjua({
				// render method: 'canvas', 'image' or 'svg'
				// 绘制方式
				render: 'image',
				// render pixel-perfect lines
				crisp: true,
				// minimum version: 1..40
				minVersion: 1,
				// error correction level: 'L', 'M', 'Q' or 'H'
				ecLevel: 'L',
				// size in pixel
				// 大小
				size: 200,
				// pixel-ratio, null for devicePixelRatio
				ratio: null,
				// code color
				fill: '#333',
				// background color
				back: '#fff',
				// content
				text: 'http://www.baidu.com',
				// roundend corners in pc: 0..100
				// 二维码圆角
				rounded: 100,
				// quiet zone in modules：二维码周围空白大小
				quiet: 0,
				// modes: 'plain', 'label' or 'image'
				// 样式：plain：默认
				//label：中间显示文字，需要设置label参数
				//image:中间显示图片，需要设置image参数
				mode: 'image',
				// label/image size and pos in pc: 0..100
				// 中间图片或文字大小
				mSize: 10,
				// 中间图片或文字位置
				mPosX: 50,
				mPosY: 50,
				// label 字体中间的文字
				label: 'label',
				// 字体
				fontname: 'sans',
				fontcolor: '#333',
				// image element
				image: img
			});
			document.querySelector('#test').appendChild(el);
		</script>
	</body>
</html>

效果如下：

图片样式

原生js生成二维码_js中怎么获取二维码信息

文字样式

原生js生成二维码_js中怎么获取二维码信息

兼容ie

由于ie不支持Object.assign(),所有需要在使用插件之前声明如下方法：

参考文章：https://my.oschina.net/u/3828418/blog/2056310

if (typeof Object.assign != 'function') {
    Object.assign = function(target) {
        'use strict';
        if (target == null) {
            throw new TypeError('Cannot convert undefined or null to object');
        }
			
        target = Object(target);
        for (var index = 1; index < arguments.length; index++) {
            var source = arguments[index];
            if (source != null) {
                for (var key in source) {
			          if (Object.prototype.hasOwnProperty.call(source, key)) {
			              target[key] = source[key];
			          }
                }
            }
        }
        return target;
    };
}

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/180925.html原文链接：https://javaforall.net