js生成二维码中间有logo

时间 2019-11-19

原文原文链接

描述： jquery.qrcode.js 是一个可以在客户端生成矩阵二维码QRCode 的jquery插件，使用它能够很方便的在页面上生成二维条码。此插件是可以独立使用的，体积也比较小，使用gzip压缩后才不到4kb。由于它是直接在客户端生成的条码，因此不会有图片下载的过程，可以实现快速生成。它是基于一个多语言的类库封装的，也不依赖于其余额外的服务。javascript

好处：使用jquery-qrcode的好处，不须要在服务器端生成多余的二维码图片，二维码直接经过JavaScript直接在客户端生成，有效减小带宽，以及维护成本。html

首先你们能够看一下jquery.qrcode.js官网，官网上也有例子。可是官网的 jquery.qrcode.js是不支持中文的，废话很少说了，如今咱们开始吧。java

官网上的 qrcode.js 文件里没有实现中文的支持和LOGO的添加，如今咱们将这个文件修改成jquery.qrcode.js文件了。此外还须要一个对中文进行转码的文件，该文件为 utf.js。而后在 jquery.qrcode.js 文件中调用了 utf.js 文件的 utf16to8(str) 方法对其中文进行了转码。jquery

下面是我写的一个示例，该示例须要的js文件有 jquery.qrcode.js 和 utf.js 以及 jquery-1.8.0.js 。还有一个 LOGO图片可点击下载文件。git

调用的jsp代码以下：github

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>该二维码支持中文和LOGO</title>
 8 
 9 <script type="text/javascript" src="jquery-1.8.0.js"></script>
10 <script type="text/javascript" src="utf.js"></script>
11 <script type="text/javascript" src="jquery.qrcode.js"></script>
12 <script type="text/javascript">
13     $(document).ready(function() {
14         $("#qrcodeCanvas").qrcode({
15             render : "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来讲比较好
16             text : "这是修改了官文的js文件，此时生成的二维码支持中文和LOGO",    //扫描二维码后显示的内容,能够直接填一个网址，扫描二维码后自动跳向该连接
17             width : "200",               //二维码的宽度
18             height : "200",              //二维码的高度
19             background : "#ffffff",       //二维码的后景色
20             foreground : "#000000",        //二维码的前景色
21             src: 'photo.jpg'             //二维码中间的图片
22         });
23     });
24 </script>
25 
26 </head>
27 <body>
28     <center>
29       <h2>该二维码支持中文和LOGO</h2>
30       <div id="qrcodeCanvas"></div>
31     </center>
32 </body>
33 </html>

js生成二维码 中间有logo

js生成二维码中间有logo