原生html中使用uQRCode插件生成二维码

六月初六月初 HTML 2023-04-09 17:47:53

二维码在如今的各类网站中已经可以说是屡见不鲜的存在，那么在原生的html网站中我们要如何实现二维码的生成呢？

本文就介绍在原生的html网站中如何基于uQRCode插件来生成二维码。

1、下载uqrcode.js

    1.1、gthub地址“点击跳转”

    2.2、百度网盘地址，提取码“pt2f”，“点击跳转”

2、二维码生成及下载代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>uQRCode二维码生成</title>
</head>
<body>
    <canvas id="qrcode" width="200" height="200"></canvas>
    <script type="text/javascript" src="uqrcode.js"></script>
	<button onClick="down()">下载二维码</button>
    <script>
		var qr = new UQRCode();
		qr.data = "六月初工具站";
		qr.size = 200;
		qr.margin = 10;
		qr.make();
		var canvas = document.getElementById("qrcode");
		var canvasContext = canvas.getContext("2d");
		qr.canvasContext = canvasContext;
		qr.drawCanvas();
		function down(){
			var a = document.createElement("a");
			a.href = canvas.toDataURL();
			a.download = '六月初工具站-二维码生成';
			a.click();
		}
    </script>
</body>
</html>
3、代码解析

    UQRCode参数配置，建议到官网进行详细查看。官网地址“点击跳转”

    down方法：关于该方法的详细说明，本站搜索《JavaScript将canvas生成的图片保存到本地》

    

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！