jquery-qrcode生成二维码
这个是通过在线的jquery来生成的二维码,我们可以点击下面网站来看一下,我们可以通过release下载jqcode文件。
前言
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>
3.运行
将jquery-qrcode的项目添加到tomcat下,在浏览器下输入下面网站(注意这个路径只是我的项目路径)运行。jquery-qrcode生成二维http://localhost:8080/jquery-qrcode/qrcode.jsp,
总结
我们学会如何用jquery-qrcode生成二维码。