利用JavaScript生成二维码并且中间有logo

痛定思痛。 2022-07-16 10:22 120阅读 0赞

一、描述

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

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

首先大家可以看一下[jquery.qrcode.js官网][jquery.qrcode.js]，官网上也有例子。但是官网的 jquery.qrcode.js是不支持中文的，废话不多说了，现在我们开始吧。

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

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

调用的html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>该二维码支持中文和LOGO</title>
    
    <script type="text/javascript" src="jquery-1.8.0.js"></script>
    <script type="text/javascript" src="utf.js"></script>
    <script type="text/javascript" src="jquery.qrcode.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#qrcodeCanvas").qrcode({
                render : "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
                text : "<span style="font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 18px;">http://www.baidu.com</span>",    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
                width : "200",               //二维码的宽度
                height : "200",              //二维码的高度
                background : "#ffffff",       //二维码的后景色
                foreground : "#000000",        //二维码的前景色
                src: 'photo.jpg'             //二维码中间的图片
            });
        });
    </script>
    
    </head>
    <body>
        <center>
          <h2>该二维码支持中文和LOGO</h2>
          <div id="qrcodeCanvas"></div>
        </center>
    </body>
    </html>

二、[源码下载][Link 1]

[jquery.qrcode.js]: http://jeromeetienne.github.io/jquery-qrcode/
[qrcode.js]: http://www.ijquery.cn/js/qrcode/qrcode.js
[jquery.qrcode.js 1]: http://files.cnblogs.com/files/pfbk/jquery.qrcode.js
[utf.js]: http://files.cnblogs.com/files/pfbk/utf.js
[jquery-1.8.0.js]: http://files.cnblogs.com/files/pfbk/jquery-1.8.0.js
[LOGO]: http://www.cnblogs.com/pfbk/gallery/image/160358.html
[Link 1]: http://pan.baidu.com/s/1o7UT7Pw