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

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

首先大家可以看一下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  和 utf.js  以及 jquery-1.8.0.js 。还有一个 LOGO图片 可点击下载文件。

调用的jsp代码如下：

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!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 : "这是修改了官文的js文件，此时生成的二维码支持中文和LOGO",    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接

             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>

运行结果：

下面是自己做的示例源码  example.zip  ，点击可下载源码。

版权声明：本文为博主原创文章，未经博主允许不得转载。

jQuery.qrcode.js客户端生成二维码，支持中文并且可以生成LOGO的更多相关文章

  1. C#Qrcode生成二维码支持中文,带图片，带文字

    C#Qrcode生成二维码支持中文带图片的操作请看二楼的帖子,当然开始需要下载一下C#Qrcode的源码 下载地址 : http://www.codeproject.com/Articles/2057 ...

  2. 使用jquery-qrcode在页面上生成二维码,支持中文

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. C# Qrcode生成二维码支持中文,带图片，带文字 2015-01-22 15:11 616人阅读 评论(1) 收藏

    1.下载Qrcode库源码,下载地址:http://www.codeproject.com/Articles/20574/Open-Source-QRCode-Library 2.打开源码时,部分类库 ...

  4. Qrcode生成二维码支持中文,带图片,带文字

    1.下载Qrcode库源码, 下载地址:http://www.codeproject.com/Articles/20574/Open-Source-QRCode-Library2.打开源码时, 部分类 ...

  5. jquery.qrcode生成二维码支持中文

    基本使用方法: 1.首先在页面中加入jquery库文件和qrcode插件. <script type="text/javascript" src="jquery.j ...

  6. 使用jquery.qrcode生成二维码支持logo，和中文

    /* utf.js - UTF-8 <=> UTF-16 convertion * * Copyright (C) 1999 Masanao Izumo <iz@onicos.co. ...

  7. 微信支付支付宝支付生成二维码的方法（php生成二维码的三种方法）

    如果图简单,可以用在线生成 http://pan.baidu.com/share/qrcode?w=150&h=150&url=http://www.xinzhenkj.com 最简单 ...

  8. 使用PHP生成二维码的两种方法(带logo图像)

    一.利用Google API生成二维码 Google提供了较为完善的二维码生成接口,调用API接口很简单,以下是调用代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  9. 使用PHP生成二维码支持自定义logo

    require_once 'phpqrcode/phpqrcode.php'; //引入类库 $text = "https://www.baidu.com/";//要生成二维码的文 ...

  10. spring boot:用zxing生成二维码,支持logo(spring boot 2.3.2)

    一,zxing是什么? 1,zxing的用途 如果我们做二维码的生成和扫描,通常会用到zxing这个库, ZXing是一个开源的,用Java实现的多种格式的1D/2D条码图像处理库. zxing还可以 ...

随机推荐

  1. loadingDialog

    1.dialog布局 dialog_loading.xml <?xml version="1.0" encoding="utf-8"?> <L ...

  2. Perl中的正则表达式

    转自:http://c20031776.blog.163.com/blog/static/684716252013624383887/ Perl 程序中,正则表达式有三种存在形式 分别是 (1 模式匹 ...

  3. Dos del参数与作用（/f/s/q)

    Dos del参数与作用(/f/s/q) C:\Documents and Settings>del /? 删除一个或数个文件. DEL [/P] [/F] [/S] [/Q] [/A[[:]a ...

  4. WOSA协议(转)

    WOSA(全称是Windows开放式系统体系结构 Windows Open System Architecture),是微软公司提出的一种在Windows操作系统下的软件架构 WOSA/XFS是基于W ...

  5. Android安卓知识点

    1 包名是唯一标识apk的记号,相当于公民身份证号. 2 ADB是Android Debug Brigde 的英文缩写,意思是Android程序调试桥,使用SDK自带的工具可以对Android模拟器或 ...

  6. android 自定义弹出框AlertDialog ，很炫的哦

      于是就小小的模仿了下自己写了这个这样的效果,主要代码如下:dlg = new AlertDialog.Builder(context).create();dlg.show();dlg.getWin ...

  7. 一条语句简单解决“每个Y的最新X”的SQL经典问题

    "每个Y的最新X"是一个经典的SQL问题,工作中经常碰到.当然不是"按Y分组求最新的X值"那么简单,要求最新X的那条记录或主键ID.用一条SQL语句可以简单的解 ...

  8. coalesce

    coalesce我理解就是将多个partition合并成少量的partition. data.coalesce(2,true) 第一个参数是partition数量 第二个参数是合并是是否进行shuff ...

  9. 2016.7.9 计算机网络复习要点第四章之虚拟专用网VPN和网络地址转换NAT

    1.虚拟专用网VPN (1)一个机构内,对于那些仅在本机构内部使用的计算机就可以由本季候自行分配其IP地址,让这些计算机使用仅在本机构有效的IP地址(本地地址),不需要申请全球唯一的IP地址(全球地址 ...

  10. MVC RenderSection

    简要使用介绍 @RenderSection在母版页中占个位,然后让使用此母版页的子页自己去呈现他们的Section. 在母版页_Layout.cshtml中定义@RenderSection(" ...