关于java-web生成二维码：jquery-qrcode

M_Fergus

已于 2022-07-12 19:27:30 修改

阅读量652

点赞数 2

文章标签： java eclipse jquery html css

于 2022-07-12 19:23:50 首次发布

本文链接：https://blog.csdn.net/m0_55415725/article/details/125724168

版权

jquery-qrcode生成二维码

这个是通过在线的jquery来生成的二维码，我们可以点击下面网站来看一下，我们可以通过release下载jqcode文件。

jeromeetienne/jquery-qrcode：qrcode生成独立（不依赖于外部服务） (github.com)https://github.com/jeromeetienne/jquery-qrcode

前言

jquery.qrcode.js是一个能够在客户端生成矩阵二维码的jquery插件。首先大家可以看一下jquery.qrcode.js官网，官网上也有例子。可以在github下载最新的维护版本。

优点：使用jquery.qrcode不需要在服务器端生成多余的二维码图片，二维码直接通过JavaScript直接在客户端生成，有效减少带宽，以及维护成本。

缺点：jquery.qrcode里没有实现中文的支持和LOGO的添加。

一、jquery-qrcode是什么？

jquery.qrcode.js是用于纯浏览器qrcode生成的jquery插件。它使您可以轻松地将qrcode添加到网页中。它是独立的，在minify + gzip之后小于4k，没有图像下载。它不依赖于打开和关闭的外部服务，也不依赖于加载时增加延迟。它基于一个以各种语言构建qrcode的库。jquery.qrcode.js将其包装起来，使其易于包含在您自己的代码中。

如何使用：

首先将其包含在带有常用脚本标记的网页中

<script type="text/javascript" src="jquery.qrcode.min.js"></script>

然后创建一个DOM元素，其中包含生成的qrcode图像。假设一个 div

<div id="qrcode"></div>

然后，您将 qrcode 添加到此容器中

jquery('#qrcode').qrcode("this plugin is great");

您可以设置生成的qr码的高度和宽度：

jquery('#qrcode').qrcode({width: 64,height: 64,text: "size doesn't matter"});

二、使用步骤

1.引入库

创建web项目，引入js库：

文件目录：

2.写入代码

js代码如下（示例）：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery-qrcode生成二维码</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.qrcode.min.js"></script>
</head>
<body>
生成二维码如下:<br>
<div id="qrcode"></div>
<script type="text/javascript" >
jQuery('#qrcode').qrcode("https://blog.csdn.net/m0_55415725?spm=1000.2115.3001.5343");
</script>

</body>
</html>