js生成二维码的几种方法

置顶 rancho辉

已于 2022-09-08 10:28:41 修改

阅读量5.6w

点赞数 20

于 2019-11-04 15:31:05 首次发布

本文链接：https://blog.csdn.net/amihui/article/details/102896009

版权

JavaScript 同时被 3 个专栏收录

18 篇文章

订阅专栏

uni-app

2 篇文章

订阅专栏

qrcode

1 篇文章

订阅专栏

一：arale-qrcode

arale-qrcode GitHub路径

npm i arale-qrcode

<html>
  <body>
	 <div id="share_tools"></div>
    <script src="qrcode.min.js"></script>
  </body>
  <script type="text/javascript">
  	var codeFigure = new AraleQRCode({
  		"render":  "svg",  // 生成的类型 'svg' or 'table'
  		"text":'https://github.com/soldair/node-qrcode', // 需要生成二维码的链接
  		"size": 120 // 生成二维码大小
  	});
	var share_tools = document.querySelector('#share_tools');
	share_tools.appendChild(codeFigure);
  </script>
</html>

二：QRCode.js

GitHub地址

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="qrcode"></div>
		<script type="text/javascript" src="qrcode.js"></script>
		<script type="text/javascript">
			new QRCode(document.getElementById("qrcode"), "https://github.com/davidshimjs/qrcodejs");
			var qrcode = new QRCode(document.getElementById("qrcode"), {
				text: "生成二维码的方法不止一种",
				width: 128,
				height: 128,
				colorDark : "#f60",
				colorLight : "#ccc",
				correctLevel : 0 // 二维码结构复杂性 0~3
			});
		</script>
	</body>
</html>

在这里插入图片描述

三：QR码生成器

api简介

<img style="width: 300px;height: 300px;" src="https://api.qrserver.com/v1/create-qr-code?data=http://goqr.me/api/" >

在这里插入图片描述